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>注释掉即可解决问题。下一章（拦截器）。
一、安装数据库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获得处理后的数据并返回
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
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