java

前面看了TextView控件,后面不想看了,先把控件都记一下,知道功能,后面用到了再查资料吧1、EditText(输入框)用于输入文本2、Button(按钮)与ImageButton(图像按钮)用于点击事件3、ImageView(图像视图)用于玩图片的,可以设置图片填满,图纵横比,圆角图之类4、RadioButton(单选按钮)&Checkbox(复选框)单选框布局代码<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/LinearLayout1"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="请选择性别"android:textSize="23dp"/><RadioGroupandroid:id="@+id/radioGroup"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"><RadioButtonandroid:id="@+id/btnMan"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="男"android:checked="true"/><RadioButtonandroid:id="@+id/btnWoman"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="女"/></RadioGroup><Buttonandroid:id="@+id/btnpost"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="提交"/></LinearLayout>点击事件判断:@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//RadioGroupradgroup=(RadioGroup)findViewById(R.id.radioGroup);////第一种获得单选按钮值的方法一开始是男,选了女之后会有提示,而不需要点击提交////为radioGroup设置一个监听器:setOnCheckedChanged()//radgroup.setOnCheckedChangeListener(newRadioGroup.OnCheckedChangeListener(){//@Override//publicvoidonCheckedChanged(RadioGroupgroup,intcheckedId){//RadioButtonradbtn=(RadioButton)findViewById(checkedId);//Toast.makeText(getApplicationContext(),"按钮组值发生改变,你选了"+radbtn.getText(),Toast.LENGTH_LONG).show();//}//});////////第二种方式,通过点击提交按钮获取值Buttonbtnchange=(Button)findViewById(R.id.btnpost);RadioGroupradgroup=(RadioGroup)findViewById(R.id.radioGroup);//为radioGroup设置一个监听器:setOnCheckedChanged()btnchange.setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewv){for(inti=0;i<radgroup.getChildCount();i++){//getChildCount()获得按钮组中的单选按钮的数目;RadioButtonrd=(RadioButton)radgroup.getChildAt(i);//getChinldAt(i):根据索引值获取我们的单选按钮if(rd.isChecked()){//isChecked():判断按钮是否选中Toast.makeText(getApplicationContext(),"点击提交按钮,获取你选择的是:"+rd.getText(),Toast.LENGTH_LONG).show();break;}}}});}复选框布局类似,大差不差,同时,可以根据需求修改选择框样式5、开关按钮ToggleButton和开关Switch6、ProgressBar(进度条)android:max:进度条的最大值android:progress:进度条已完成进度值android:progressDrawable:设置轨道对应的Drawable对象android:indeterminate:如果设置成true,则进度条不精确显示进度android:indeterminateDrawable:设置不显示进度的进度条的Drawable对象android:indeterminateDuration:设置不精确显示进度的持续时间android:secondaryProgress:二级进度条,类似于视频播放的一条是当前播放进度,一条是缓冲进度,前者通过progress属性进行设置!7、SeekBar(拖动条)这玩意是进度条的子类android:max="100"//滑动条的最大值android:progress="60"//滑动条的当前值android:secondaryProgress="70"//二级滑动条的进度android:thumb="@mipmap/sb_icon"//滑块的drawable接着要说下SeekBar的事件了,SeekBar.OnSeekBarChangeListener我们只需重写三个对应的方法:onProgressChanged:进度发生改变时会触发onStartTrackingTouch:按住SeekBar时会触发onStopTrackingTouch:放开SeekBar时触发8、RatingBar(星级评分条)最傻逼和最简单的。。。。。9、ScrollView(滚动条)滚动到底部:我们可以直接利用ScrollView给我们提供的:fullScroll()方法:scrollView.fullScroll(ScrollView.FOCUS_DOWN);滚动到底部scrollView.fullScroll(ScrollView.FOCUS_UP);滚动到顶部另外用这玩意的时候要小心异步的玩意,就是addView后,有可能还没有显示完,如果这个时候直接调用该方法的话,可能会无效,这就需要自己写handler来更新了~publicstaticvoidscrollToBottom(finalViewscroll,finalViewinner){HandlermHandler=newHandler();mHandler.post(newRunnable(){publicvoidrun(){if(scroll==null||inner==null){return;}intoffset=inner.getMeasuredHeight()-scroll.getHeight();if(offset<0){offset=0;}scroll.scrollTo(0,offset);}});}2.设置滚动的滑块图片这个更加简单:垂直方向滑块:android:scrollbarThumbVertical水平方向滑块:android:scrollbarThumbHorizontal

java

TextView1、基础属性<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"android:gravity="center"android:background="#8fffad"><TextViewandroid:id="@+id/txtOne"android:layout_width="200dp"android:layout_height="200dp"android:gravity="center"android:text="TextView(显示框)"android:textColor="#EA5246"android:textStyle="bold|italic"android:background="#000000"android:textSize="18sp"/></RelativeLayout>2、实际开发2.1带阴影的textViewandroid:shadowColor:设置阴影颜色,需要与shadowRadius一起使用哦!android:shadowRadius:设置阴影的模糊程度,设为0.1就变成字体颜色了,建议使用3.0android:shadowDx:设置阴影在水平方向的偏移,就是水平方向阴影开始的横坐标位置android:shadowDy:设置阴影在竖直方向的偏移,就是竖直方向阴影开始的纵坐标位置2.2带边框的TextViewshapeDrawable,画2.3带图片(drawableXxx)的TextView:这里就把图片直接放在Drawable文件夹下就行然后在TextView中可以设置四个方向的图片:drawableTop(上),drawableButtom(下),drawableLeft(左),drawableRight(右)另外,也可以使用drawablePadding来设置图片与文字间的间距!<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.jay.example.test.MainActivity"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:drawableTop="@drawable/show1"android:drawableLeft="@drawable/show1"android:drawableRight="@drawable/show1"android:drawableBottom="@drawable/show1"android:drawablePadding="10dp"android:text="张全蛋"/></RelativeLayout>这样设置的drawable并不能自行设置大小,在XML是无法直接设置的;所以我们需要在Java代码中来进行一个修改!publicclassMainActivityextendsAppCompatActivity{privateTextViewtxtZQD;@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);txtZQD=(TextView)findViewById(R.id.txtZQD);Drawable[]drawable=txtZQD.getCompoundDrawables();//获得四个方向的图片资源放到数组//数组下表0~3,依次是:左上右下drawable[1].setBounds(100,0,200,200);txtZQD.setCompoundDrawables(drawable[0],drawable[1],drawable[2],drawable[3]);}}2.4使用autoLink属性识别链接类型<TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="http://www.baidu.com"android:autoLink="web"android:textColor="#000000"android:textSize="30sp"android:background="@drawable/txt_rectborder"/>2.5TextView玩转HTML2.6SpannableString&SpannableStringBuilder定制文本这里的用到再看吧https://www.runoob.com/w3cnote/android-tutorial-textview.html后面还有啥跑马灯之类的,也是用到再说吧。

java

一、view和ViewGroupAPP的用户界面上的每一个组件都是使用View和ViewGroup对象的层次结构来构成的,如图1.要定义一个布局,可以用代码,也可以用xml文件定义。比如这样:<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical"><TextViewandroid:id="@+id/text"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="IamaTextView"/><Buttonandroid:id="@+id/button"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="IamaButton"/></LinearLayout>实际应用中多数还是采用app控件以及标准的UI布局。二、六大布局:1、LinearLayout(线性布局)先图:大多用等比例划分的属性用于适配不同屏幕。2、RelativeLayout(相对布局)以父容器或者兄弟组件参考+margin+padding就可以设置组件的显示位置上图:以父容器定位以兄弟组件定位margin与padding的区别首先margin代表的是偏移,比如marginleft="5dp"表示组件离容器左边缘偏移5dp;而padding代表的则是填充,而填充的对象针对的是组件中的元素,比如TextView中的文字比如为TextView设置paddingleft="5dp",则是在组件里的元素的左边填充5dp的空间!margin针对的是容器中的组件,而padding针对的是组件中的元素,要区分开来!3、TableLayout(表格布局)4、FrameLayout(帧布局)属性:android:foreground:*设置改帧布局容器的前景图像android:foregroundGravity:设置前景图像显示的位置5、GridLayout(网格布局)6、AbsoluteLayout(绝对布局)建议少用,因为,可能不同手机屏幕大小像素的不同导致适配完全不同,换了就出错。单位dp①控制大小:android:layout_width:组件宽度android:layout_height:组件高度②控制位置:android:layout_x:设置组件的X坐标android:layout_y:设置组件的Y坐标androidstudio就可以玩,可以尝试一下。

2022-9-14 27 0
java

一、目录结构新建了一个空项目,目录结构就这样:java:我们写Java代码的地方,业务功能都在这里实现res:存放我们各种资源文件的地方,有图片,字符串,动画,音频等,还有各种形式的XML文件巨麻烦,一个前端一个后端,很烦。1、res资源目录PS:说到这个res目录,另外还有提下这个assets目录,虽然这里没有,但是我们可以自己创建,两者的区别在于是否前者下所有的资源文件都会在R.java文件下生成对应的资源id,而后者并不会;前者我们可以直接通过资源id访问到对应的资源;而后者则需要我们通过AssetManager以二进制流的形式来读取!对了,这个R文件可以理解为字典,res下每个资源都都会在这里生成一个唯一的iddrawable图片资源:drawable:存放各种位图文件,(.png,.jpg,.9png,.gif等)除此之外可能是一些其他的drawable类型的XML文件mipmap-hdpi:高分辨率,一般我们把图片丢这里mipmap-mdpi:中等分辨率,很少,除非兼容的的手机很旧mipmap-xhdpi:超高分辨率,手机屏幕材质越来越好,以后估计会慢慢往这里过渡mipmap-xxhdpi:超超高分辨率,这个在高端机上有所体现layout布局资源layout:该目录下存放的就是我们的布局文件,另外在一些特定的机型上,我们做屏幕适配,比如480*320这样的手机,我们会另外创建一套布局,就行:layout-480x320这样的文件夹!menu菜单资源menu:在以前有物理菜单按钮,即menu键的手机上,用的较多,现在用的并不多,菜单项相关的资源xml可在这里编写,不知道谷歌会不会出新的东西来替代菜单了~values目录demens.xml:定义尺寸资源string.xml:定义字符串资源styles.xml:定义样式资源colors.xml:定义颜色资源arrays.xml:定义数组资源attrs.xml:自定义控件时用的较多,自定义控件的属性!theme主题文件,和styles很相似,但是会对整个应用中的Actvitiy或指定Activity起作用,一般是改变窗口外观的!可在Java代码中通过setTheme使用,或者在Androidmanifest.xml中为<application...>添加theme的属性!PS:你可能看到过这样的values目录:values-w820dp,values-v11等,前者w代表平板设备,820dp代表屏幕宽度;而v11这样代表在API(11),即android3.0后才会用到的!AndroidManifest.xml主配置文件,用于配置各个组件的访问权限。Android程序签名打包签名的作用:1.应用程序升级:无缝升级到新的版本,包签名必须是同一证书。2.应用程序模块化3.代码数据共享:不同的应用程序之间,想共享数据,或者共享代码,那么要让他们运行在同一个进程中,而且要让他们用相同的证书签名。其余操作借鉴https://www.runoob.com/w3cnote/android-tutorial-sign-package.html反编译:工具apktools:https://ibotpeaches.github.io/Apktool/dex2jar:https://github.com/pxb1988/dex2jarJD-GUI:http://java-decompiler.github.io/感兴趣的自己研究吧。

2022-9-14 29 0
java

android代码名称:版本号版本名中文名API33Android13/AndroidT/Tiramisu/提拉米苏API32S_V2/sv2/SnowCone/刨冰API31Android12/AndroidS/SnowCone/刨冰API30Android11/AndroidR/RedVelvetCake(红丝绒蛋糕)/RVCAPI29Android10/AndroidQ(Android系统将直接被称为Android10,不再使用甜品做代号)APIQandroidQAPI28android9.0Pie馅饼API27android8.1Oreo奥利奥API26android8.0Oreo奥利奥API25android7.1Nougat牛轧糖API24android7.0Nougat牛轧糖API23android6.0Marshmallow棉花糖API22android5.1Lollipop棒棒糖API21android5.0Lollipop棒棒糖API20android4.4WKitKat奇巧巧克力棒API19android4.4KitKat奇巧巧克力棒API18android4.3JellyBean果冻豆API17android4.2JellyBean果冻豆API16android4.1JellyBean果冻豆API15android4.0.3~4.0.4IceCreamSandwich冰淇淋三明治API14android4.0~4.0.2IceCreamSandwich冰淇淋三明治API13android3.2Honeycomb蜂巢API12android3.1Honeycomb蜂巢API11android3.0Honeycomb蜂巢API10android2.3.3~2.3.7Gingerbread姜饼API9android2.3~2.3.2Gingerbread姜饼API8android2.2~2.2.3Froyo冻酸奶API7android2.1Éclair闪电泡芙API6android2.0.1Éclair闪电泡芙API5android2.0Éclair闪电泡芙API4android1.6Donut甜甜圈API3android1.5ICupcake纸杯蛋糕API2android1.1API1android1.0android架构:1、应用程序层就是程序员开发的那一层,就是平常用户用的那些app们。2、应用程序框架就是安卓操作系统所提供的各种API,程序员可以通过调用这些API进行程序开发。a.丰富而又可扩展的视图(Views),可以用来构建应用程序,它包括列表(lists),网格(grids),文本框(textboxes),按钮(buttons),甚至可嵌入的web浏览器。b.内容提供器(ContentProviders)使得应用程序可以访问另一个应用程序的数据(如联系人数据库),或者共享它们自己的数据。c.资源管理器(ResourceManager)提供非代码资源的访问,如本地字符串,图形,和布局文件(layoutfiles)。d.通知管理器(NotificationManager)使得应用程序可以在状态栏中显示自定义的提示信息。e.活动管理器(ActivityManager)用来管理应用程序生命周期并提供常用的导航回退功能。3、系统运行库a、程序库Android包含一些C/C++库,这些库能被Android系统中不同的组件使用。它们通过Android应用程序框架为开发者提供服务。以下是一些核心库:主要包括基本的C库、以及多媒体库以支持各种多媒体格式、位图和矢量字体、2D和3D图形引擎、浏览器、数据库支持。1.Bionic系统C库。2.媒体库,基于PacketVideoOpenCORE。3.SurfaceManager顾名思义,用于管理Surface。4.Webkit,LibWebCore浏览器,基于Webkit引擎。5.SGL底层的2D图形引擎6.3Dlibraries基于OpenGLES1.0APIs实现7.FreeType位图(bitmap)和矢量(vector)字体显示。8.SQLite一个对于所有应用程序可用,功能强劲的轻型关系型数据库引擎。b、Android运行库Android包括了一个核心库,该核心库提供了JAVA编程语言核心库的大多数功能。每一个Android应用程序都在它自己的进程中运行,都拥有一个独立的Dalvik虚拟机实例。(安卓5.0之后改用ART虚拟机)Dalvik被设计成一个设备可以同时高效地运行多个虚拟系统。Dalvik虚拟机执行(.dex)的Dalvik可执行文件,该格式文件针对小内存使用做了优化。同时虚拟机是基于寄存器的,所有的类都经由JAVA编译器编译,然后通过SDK中的"dx"工具转化成.dex格式由虚拟机执行。Dalvik虚拟机依赖于linux内核的一些功能,比如线程机制和底层内存管理机制。4、Linux内核Android的核心系统服务依赖于内核,如安全性,内存管理,进程管理,网络协议栈和驱动模型。每个安卓版本API对应的Linux内核版本也都不相同。Linux内核也同时作为硬件和软件栈之间的抽象层。其外还对其做了部分修改,主要涉及两部分修改:a)Binder(IPC):提供有效的进程间通信,虽然linux内核本身已经提供了这些功能,但Android系统很多服务都需要用到该功能,为了某种原因其实现了自己的一套。b)电源管理:为手持设备节省能耗。Android开发语言Java,分为3部分:a)java语言:即其语法,其写代码的程式b)java虚拟机:为了实现一次编译到处可以运行的原则,java在编译连接以后并没有产生目标机器语言,而是采用了Javabytecode这种Java共用指令,这时就需要一个虚拟机来执行改指令。c)库:跟我们常用的C语言一样提供一些常用的库后两者结合就是JavaRuntimeEnvironment。参考文献:https://blog.csdn.net/salary/article/details/82177546参考文献:https://www.cnblogs.com/skynet/archive/2010/04/15/1712924.html参考文献:https://www.cnblogs.com/lijunamneg/archive/2013/01/18/2866953.html

2022-9-14 37 0
java

1、安装Element搬运自官方文档https://element.eleme.cn/#/zh-CN/component/quickstartnpm安装推荐使用npm的方式安装,它能更好地和webpack打包工具配合使用。npmielement-ui-S引入Element你可以引入整个Element,或是根据需要仅引入部分组件。按需引入可以参考官方文档,组件列表包括以components.json为准¶完整引入在main.js中写入以下内容:importVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importAppfrom'./App.vue';Vue.use(ElementUI);newVue({el:'#app',render:h=>h(App)});二、优化登录页面1.使用form组件修改Login.vue的<template>内部代码添加form组件:<el-formclass="login-container"label-position="left"label-width="0px"><h3class="login_title">系统登录</h3><el-form-item><el-inputtype="text"v-model="loginForm.username"auto-complete="off"placeholder="账号"></el-input></el-form-item><el-form-item><el-inputtype="password"v-model="loginForm.password"auto-complete="off"placeholder="密码"></el-input></el-form-item><el-form-itemstyle="width:100%"><el-buttontype="primary"style="width:100%;background:#505458;border:none"v-on:click="login">登录</el-button></el-form-item></el-form><el-form>里面可以放置<el-form-item>,<el-form-item>里面再放置其它的内容,比如<el-input>,关于<el-input>的属性,可以查阅Input的文档,<el-button>亦然。2.添加样式还是在login.vue中添加代码,放在最后就可以:<style>.login-container{border-radius:15px;background-clip:padding-box;margin:90pxauto;width:350px;padding:35px35px15px35px;background:#fff;border:1pxsolid#eaeaea;box-shadow:0025px#cac6c6;}.login_title{margin:0pxauto40pxauto;text-align:center;color:#505458;}</style>访问http://127.0.0.1:8080/#/login发现上端有一块空白在浏览器按F12进行debug,可以看到上端有一块60px浮动,查找代码发现app.vue中有一处<style>注释掉即可解决问题。下一章(拦截器)。

java

一、安装数据库1、我的MySQL版本是5.7,官方下载页面是https://dev.mysql.com/downloads/mysql/5.7.html#downloads2、安装教程可以参考https://blog.csdn.net/ma524654165/article/details/778554313、安装完成之后需要在pom文件中添加对mysql的jar包的依赖,当然你也可以在上一篇中新建springboot时和我一样直接选中相关的mysql依赖。同时,上节也说了了如何在application.yml中配置数据库连接了。4、执行sql语句新建一个我们项目中需要的数据库和数据表--------------------------------Tablestructureforuser------------------------------DROPTABLEIFEXISTS`user`;CREATETABLE`user`(`id`int(11)unsignedNOTNULLAUTO_INCREMENT,`username`varchar(255)DEFAULTNULL,`password`varchar(255)DEFAULTNULL,PRIMARYKEY(`id`))ENGINE=InnoDBAUTO_INCREMENT=2DEFAULTCHARSET=utf8;--------------------------------Recordsofuser------------------------------INSERTINTO`user`VALUES('1','admin','123');这里用户密码设置了123哦,后面测试别再输入123456了二、使用数据库验证登录在上一篇中,我们是直接在代码中默认了登录账号和密码为admin和123456,使用了数据库之后,我们则需要从数据库中取出相应登录名以及它所对应的密码并做出相应验证,其余思路和上节类似。User类:packagecom.example.library.pojo;importlombok.Data;importjavax.persistence.Entity;importjavax.persistence.GeneratedValue;importjavax.persistence.GenerationType;importjavax.persistence.Id;@Entity//jpa注解,表示这是一个实体类@DatapublicclassUser{@Id//标识主键@GeneratedValue(strategy=GenerationType.IDENTITY)//表示主键自增intid;Stringusername;Stringpassword;}Dao层DataAccessObject(数据访问对象,DAO)即用来操作数据库的对象,代码中通过继承JpaRepository类构建Dao。新建一个package,命名为dao,然后创建JavaClass,命名为UserDAO。代码如下:packagecom.example.library.dao;importcom.example.library.pojo.User;importorg.springframework.data.jpa.repository.JpaRepository;publicinterfaceUserDaoextendsJpaRepository<User,Integer>{UserfindByUsername(Stringusername);UserfindByUsernameAndPassword(Stringusername,Stringpassword);}Jpa有自己的代码规范,这里看似一句SQL语句没写,但实际上函数的命名就为这个函数提供了相应的SQL语句。比如findByUsername,就是通过username字段查询到对应的行,并返回给User类。UserService新建package,命名为service,新建JavaClass,命名为UserService,代码如下:packagecom.example.library.service;importcom.example.library.dao.UserDao;importcom.example.library.pojo.User;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.stereotype.Service;@ServicepublicclassUserService{@AutowiredprivateUserDaouserDao;publicUsergetByName(Stringusername){returnuserDao.findByUsername(username);}publicbooleanisExist(Stringusername){Useruser=getByName(username);returnnull!=user;}publicUserget(Stringusername,Stringpassword){returnuserDao.findByUsernameAndPassword(username,password);}publicvoidsave(Useruser){userDao.save(user);}}在Dao中定义了增删改查,service这里是对Dao定义的增删改查做进一步处理。LoginController和之前的基本逻辑一样但是,用户密码验证的if语句改成了从数据库读取并判断。就是通过UserService提供的get方法查询数据库,如果返回的对象为空,则验证失败,否则就验证成功。代码如下:packagecom.example.library.controller;importcom.example.library.result.Result;importcom.example.library.service.UserService;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.stereotype.Controller;importorg.springframework.web.bind.annotation.*;importorg.springframework.web.util.HtmlUtils;importcom.example.library.pojo.User;@ControllerpublicclassLoginController{@AutowiredUserServiceuserService;@CrossOrigin@PostMapping(value="api/login")@ResponseBodypublicResultlogin(@RequestBodyUserrequestUser){//对html标签进行转义,防止XSS攻击Stringusername=requestUser.getUsername();username=HtmlUtils.htmlEscape(username);Useruser=userService.get(username,requestUser.getPassword());if(user==null){Stringmessage="账号密码错误";returnnewResult(400);}else{returnnewResult(200);}}}总结DAO用于与数据库的直接交互,定义增删改查等操作Service负责业务逻辑,跟功能相关的代码一般写在这里,编写、调用各种方法对DAO取得的数据进行操作Controller负责数据交互,即接收前端发送的数据,通过调用Service获得处理后的数据并返回

java

VUE前端编写前面提到过前后端分离的意思是前后端之间通过RESTfulAPI传递JSON数据进行交流。不同于JSP之类,后端是不涉及页面本身的内容的。在开发的时候,前端用前端的服务器(Nginx),后端用后端的服务器(Tomcat),当我开发前端内容的时候,可以把前端的请求通过前端服务器转发给后端(称为反向代理),这样就能实时观察结果,并且不需要知道后端怎么实现,而只需要知道接口提供的功能,两边的开发人员就可以各司其职啦。正向代理:常见的就是梯子。比如我要访问A,但我访问不了,B可以访问,我就先访问B,踩着B去访问A。这是一个主动的过程。反向代理:比如我访问A,A无法处理我的请求,A将我的请求转发到B处理,B处理完成之后又发回给A,这个过程我只知道我访问了A,并不知道A还有一个访问B的过程。这是一个被动的过程。通常可以用于保护B服务器IP。前端页面开发Login.vue首先我们开发登录页面组件,右键src\components文件夹,New->VueComponent,命名为Login,如果没有VueComponent这个选项,可以选择新建一个File,命名为Login.vue即可。代码如下:<template><div>用户名:<inputtype="text"v-model="loginForm.username"placeholder="请输入用户名"/><br><br>密码:<inputtype="password"v-model="loginForm.password"placeholder="请输入密码"/><br><br><buttonv-on:click="login">登录</button></div></template><script>exportdefault{name:'Login',data(){return{loginForm:{username:'',password:''},responseResult:[]}},methods:{login(){this.$axios.post('/login',{username:this.loginForm.username,password:this.loginForm.password}).then(successResponse=>{if(successResponse.data.code===200){this.$router.replace({path:'/index'})}}).catch(failResponse=>{})}}}</script><template>标签中随便写了一个登录的界面,methods中定义了登录按钮的点击方法,即向后端/login接口发送数据,获得成功的响应后,页面跳转到/index。因为之前我们设置了默认的URL,所以请求实际上发到了http://localhost:8443/api/login。AppIndex.vue右键src\components文件夹,新建一个directory,命名为home,再在home下新建一个Appindex.vue,即首页组件,先随便写个HelloWorld。<template><div>HelloWorld!</div></template><script>exportdefault{name:'AppIndex'}</script><stylescoped></style>3.前端相关配置设置反向代理修改src\main.js代码如下:importVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'//设置反向代理,前端请求默认发送到http://localhost:8443/apivaraxios=require('axios')axios.defaults.baseURL='http://localhost:8443/api'//全局注册,之后可在其他组件中通过this.$axios发送数据Vue.prototype.$axios=axiosVue.config.productionTip=false/*eslint-disableno-new*/newVue({el:'#app',router,components:{App},template:'<App/>'})因为使用了新的模块axios,所以需要进入到项目文件夹中,执行npminstall--saveaxios,以安装这个模块。配置页面路由修改src\router\index.js代码如下:importVuefrom'vue'importRouterfrom'vue-router'//导入刚才编写的组件importAppIndexfrom'@/components/home/AppIndex'importLoginfrom'@/components/Login'Vue.use(Router)exportdefaultnewRouter({routes:[//下面都是固定的写法{path:'/login',name:'Login',component:Login},{path:'/index',name:'AppIndex',component:AppIndex}]})跨域支持为了让后端能够访问到前端的资源,需要配置跨域支持。在config\index.js中,找到proxyTable位置,修改为以下内容:proxyTable:{'/api':{target:'http://localhost:8443',changeOrigin:true,pathRewrite:{'^/api':''}}}运行项目执行npmrundev,查看登录页面效果。注意地址是localhost:8080/#/login,中间有这个#是因为Vue的路由使用了Hash模式,是单页面应用的经典用法,但连开发者本人都觉得不太好看,所以可以在路由配置中选择使用History模式,但会引发一些问题,需要在后端作出处理。后端开发User类在Login.vue中,前端发送数据的代码段为:.post('/login',{username:this.loginForm.username,password:this.loginForm.password})后端如何接收这个JS对象呢?我们很自然地想到在需要创建一个形式上一致的Java类。打开我们的后端项目library,首先在src\main\java\com\example\library文件夹(就是你自己的web项目的包)下,新建一个pojo包(package),然后新建User类,代码如下:packagecom.example.library.pojo;importlombok.Data;@DatapublicclassUser{intid;Stringusername;Stringpassword;//publicintgetId(){//returnid;//}////publicvoidsetId(intid){//this.id=id;//}////publicStringgetUsername(){//returnusername;//}////publicvoidsetUsername(Stringusername){//this.username=username;//}////publicStringgetPassword(){//returnpassword;//}////publicvoidsetPassword(Stringpassword){//this.password=password;//}}Result类Result类是为了构造response,主要是响应码。新建result包,创建Result类,代码如下:packagecom.example.library.result;publicclassResult{//响应码privateintcode;publicResult(intcode){this.code=code;}publicintgetCode(){returncode;}publicvoidsetCode(intcode){this.code=code;}}LoginControllerController是对响应进行处理的部分。这里我们设定账号是admin,密码是123456,分别与接收到的User类的username和password进行比较,根据结果返回不同的Result,即不同的响应码。前端如果接收到成功的响应码(200),则跳转到/index页面。在library下新建controller包,新建LoginController类,代码如下:packagecom.example.library.controller;importcom.example.library.result.Result;importorg.springframework.stereotype.Controller;importorg.springframework.web.bind.annotation.*;importorg.springframework.web.util.HtmlUtils;importcom.example.library.pojo.User;importjava.util.Objects;@ControllerpublicclassLoginController{@CrossOrigin@PostMapping(value="api/login")@ResponseBodypublicResultlogin(@RequestBodyUserrequestUser){//对html标签进行转义,防止XSS攻击Stringusername=requestUser.getUsername();username=HtmlUtils.htmlEscape(username);if(!Objects.equals("admin",username)||!Objects.equals("123456",requestUser.getPassword())){Stringmessage="账号密码错误";System.out.println("test");returnnewResult(400);}else{returnnewResult(200);}}}这里只是为了演示前后端的交互过程,真正的登录验证要考虑更多因素,后面文章会持续更新。另外,实际上在controller里写这么多逻辑是不合理的,要尽量封装到service里面去。最后,在src\main\resources文件夹下找到application.yml文件配置端口,即加上server.port=8443。测试项目同时运行前端和后端项目,访问localhost:8080/#/login,输入用户名admin,密码123456点击确定,成功进入跳转到http://127.0.0.1:8080/#/index!最简陋的项目已经完成,后面继续更新数据库!部分转载自:https://learner.blog.csdn.net/article/details/88955387

java

MVC框架:Model——即模型。模型一般都有很好的可复用性,统一管理一些我们需要使用的数据。(处理需求,一般就是对数据库处理,springboot中的DAO层代码)View——用于存放试图。(负责展示给用户和从用户接受需求)Controller——控制器它负责处理View和Model的事件。(负责转发)MVVM框架:随着应用的Controller的负担越来越大因此在MVC的基础上繁衍出了MVVM框架。VUE:1.安装并新建一个项目vue是MVVM框架类型的。先安装nodejs,去官网下载安装即可。安装cnpm,国内源。npminstall-gcnpm--registry=http://registry.npm.taobao.org之后的所有npm命令都可以用cnpm代替了。安装vue脚手架。npminstall-gvue-cli执行npminitvue@latest创建一个新项目。也可以通过webpack创建一个项目:vueinitwebpackdemo(一路回车就行)cd到项目目录下cnpminstall下载依赖包(尤其是在git中克隆了别人的项目,这一步是必须的)运行项目npmrundev2.vue目录结构和代码分析(1)index.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><linkrel="icon"href="/favicon.ico"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>ViteApp</title></head><body><divid="app"></div><scripttype="module"src="/src/main.js"></script></body></html>首页代码<!--builtfileswillbeautoinjected-->,我们所构建的整个app会被注入到app这个div中(2)App.vue.vue文件是一种自定义文件类型,在结构上类似html,一个.vue文件即是一个vue组件。<template><divid="app"><imgsrc="./assets/logo.png"><router-view/></div></template><script>exportdefault{name:'App'}</script><style>#app{font-family:'Avenir',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px;}</style><router-view/>标签是一个容器,名字叫“路由视图”。表示当前路由(URL)指向的内容将显示在这个容器中。也就是说,其它的组件即使拥有自己的路由(URL,需要在router文件夹的index.js文件里定义),也只不过表面上是一个单独的页面,实际上只是在根组件App.vue中。比如我们打开一个点餐的页面,然后进入了一个商家,在这商家的菜品里,我们每一个都点开了一遍,但是却都只用了商家的容器,都在商家这个页面上。(3)main.jsimportVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'Vue.config.productionTip=false/*eslint-disableno-new*/newVue({el:'#app',router,components:{App},template:'<App/>'})在这个js文件中,创建了一个Vue对象(实例),el属性提供一个在页面上已存在的DOM元素作为Vue对象的挂载目标,router代表该对象包含VueRouter,并使用项目中定义的路由。components表示该对象包含的Vue组件,template是用一个字符串模板作为Vue实例的标识使用,类似于定义一个html标签。3、vue+springboot登录模块开发我用的IDE是IntelliJIDEA新建project暂时选择了这些依赖当然这样是前后端分离的,毕竟我们要用vue了,之前在学springboot的时候还推荐了thymeleaf这个模板,用这个的话,你可以自己在resource写前端页面,自行百度吧,我是想快速接入开发组,所以不看了。(另外,如果是新手的话最好百度一下maven本地仓库配置等内容进行学习)点击create进行创建,创建完毕run起来,并访问127.0.0.1:8080run了一下发现需要配置mysql数据库,毕竟自己选择了mysql组件了,傻了。打开resource下的application.yml,我不习惯用properties文件,喜欢yml配置。配置完成,run起来:不要慌!我们做的是前后端分离的项目,现在只是后端,没有绑定前端,接下来开始前端编写!部分转发自https://learner.blog.csdn.net/article/details/88955387