https://blog.csdn.net/Neuf_Soleil/article/details/88925013
准备工作
需要安装
- node
- npm 换源不然很慢
- npm config set registry https://registry.npm.taobao.org
- Vue
- 脚手架
npm install -g vue-cli
- 脚手架
Vue 初始化创建项目
自己创建 Vue 前端项目
vue init webpack jiang-vue
如果很慢 可以先利用
git clone https://github.com/vuejs-templates/webpack.git
然后运行
vue init ./webpack jiang-vue
然后回车
安装好后
到我们的 jiang-vue 目录下运行
npm run dev
利用 IDE 创建 vue 项目
首先安装 vue.js 插件
https://plugins.jetbrains.com/plugin/9442-vue-js/versions/
然后就可以创建项目
打开终端输入 npm install
然后运行
查看 对应的指令
运行 npm run serve
运行
创建好的目录结构为
Vue 分类介绍
一般利用 vue init ./webpack 项目名
的vue 项目
App.vue
“根组件”
初始代码
1 | <template> |
<div id='app'>
对应下面的 css
<HelloWorld msg="Welcome to Your Vue.js App"/>
一个 HelloWorld 组件
是 import 引入的
显示的 是 HelloWorld.vue
main.js
1 | import Vue from 'vue' |
vue 模块在 node_modules 中,App 即 App.vue 里定义的组件,router 即 router 文件夹里定义的路由。
Vue.config.productionTip = false ,作用是阻止vue 在启动时生成生产提示。
前后端结合
前后端准备
前端 利用准备工作中的 vue 准备
后端创建 web 导入的 springboot 项目
关于前后端结合
前端用前端的服务器(Nginx),后端用后端的服务器(Tomcat)
把前端的请求通过前端服务器转发给后端(称为反向代理)
前后端分离的意思是前后端之间通过 RESTful API 传递 JSON 数据进行交流。不同于 JSP 之类,后端是不涉及页面本身的内容的。
登录页面开发
前端开发
Login.vue
创建 Login.vue 组件
然后写代码
其中 <template>
中 按照 html 格式写下 前端登录页面代码
1 | <template> |
然后 <script>
中写下登录用到的方法。
methods
中定义了登录按钮的点击方法,即向后端 /login
接口发送数据,获得成功的响应后,页面跳转到 /index
。
1 | <template> |
AppIndex.vue
src\components
文件下创建 不修改内容
1 | <template> |
前端配置
修改 main.js
内容
需要安装· npm install --save axios
这里的 Vue.prototype.$axios 利用的是 原型链的知识点
1 | import Vue from 'vue' |
修改 src\router\index.js
修改对应路由
1 | import Vue from 'vue' |
跨域支持
让后端能够访问到前端资源。
需要修改 config\index.js
中 的 proxyTable
分析
1 |
|
测试
运行 npm run dev
后端开发
首先要在 Login.vue 中设置前端发送的代码。
1 | .post('/login', { |
然后在外面的 后端 springboot 项目中创建对应的 类。
基础类
User.java
1 | package com.jiang.springbootvue.pojo; |
然后创建对应的 response 对应的类
Result.java
1 | package com.jiang.springbootvue.result; |
Controller 类
LoginController 管理对应的 接受效果。
这里我们要获得 传入的 username userpasswd 且进行比较然后返回对应的状态。
1 | package com.jiang.springbootvue.controller; |
然后修改 src\main\resource
下的 application.properties
server.port=8888
同时启动前端和后端项目。
访问前端登录页面
输入 admin 密码 jiang 登录进入到 index 页面
能成功实现的原因是 因为前端
数据库引入
创建对应数据库
利用 docker 对应的 mysql 数据库
https://www.jianshu.com/p/32bec528a0a3
利用 Navicat
链接数据库
创建对应项目需要的数据库
然后在对应的数据库里面创建新的表
然后我们在这个表中创建 admin 用户
链接数据库
配置 pom.xml 我们需要的依赖
1 | <dependency> |
配置数据库连接
src\main\resources\application.properties
1 | 8888 = |
配置我们的类
创建两个 新类
Userdao.java
1 | package com.evan.jiang.dao; |
UserDAO.java
中 我们利用了 JPA。
无需手动构建 SQL 语句,而只需要按照规范提供方法的名字即可实现对数据库的增删改查。
这里我们利用 JAP 自带的两个方法
findByUsername
就是通过 username
字段查询到对应的行,并返回给 User 类。
getByUsernameAndPassword
通过用户名及密码查询
UserService.java
1 | package com.evan.jiang.service; |
我们还需要修改我们的 user 类 利用标签与 数据库内容对应
user.java
1 | package com.evan.jiang.pojo; |
我们的项目会在很长一段时间内采取这种简单的三层架构(DAO + Service + Controller),希望大家能慢慢体会这三个模块的分工。这里我简单总结一下,先有个初步印象:
- DAO 用于与数据库的直接交互,定义增删改查等操作
- Service 负责业务逻辑,跟功能相关的代码一般写在这里,编写、调用各种方法对 DAO 取得的数据进行操作
- Controller 负责数据交互,即接收前端发送的数据,通过调用 Service 获得处理后的数据并返回
Element 前端开发
vue 项目下 npm i element-ui -S
安装
使用 Element
我们需要在 vue 项目的 main.js 中引入
1 | import ElementUI from 'element-ui' |
测试 修改 Login.vue
1 | <el-card> |
运行
Element 组件文档
http://element-cn.eleme.io/#/zh-CN/component/
设置 login.vue
1 | <template> |
主要配置可以查看
https://learner.blog.csdn.net/article/details/89298717
前端路由与登录拦截器
在外面的 前端页面中 URL 后面有个 #
监听 #
号后面内容的变化(hashChange
),从而动态改变页面内容。不用每次都去请求后端。URL 的 #
号后面的地址被称为 hash
。
两种模式:
Hash
模式,是非常典型的前端路由方式。 有个 #
History
:先把页面的状态保存到一个对象(state
)里,当页面的 URL 变化时找到对应的对象,从而还原这个页面。
如果要使用 history 模式
修改 router\index.js
添加 mode: 'history',
1 | import Vue from 'vue' |
然后可以 直接访问路由
打包前端 不熟在后端里面。
利用 npm run build
对应文件 生成文件
拷贝到我们后端项目的 jiang\src\main\resources\static
文件夹下
但是运行后端访问 localhost:8888/login
因为这个时候 后端的目录里面 只有一个 index.html 文件。
因为没有 login 目录等。 所以我们需要设置对应的 渲染 当访问 对应 404 页面的时候 能返回到 index.html 也没。
创建 error
包
1 | package com.evan.jiang.error; |
访问 对应路由实现功能。
后端登录拦截器
一个简单拦截器的逻辑如下:
1.用户访问 URL,检测是否为登录页面,如果是登录页面则不拦截
2.如果用户访问的不是登录页面,检测用户是否已登录,如果未登录则跳转到登录页面
这里我们就用到了 session。
需要在登录成功的时候 设置对应的 session
修改 LoginController.java
1 | package com.evan.jiang.controller; |
创建拦截器包 interceptor
preHandle
方法里的代码会在访问需要拦截的页面时执行。
设置拦截器 LoginInterceptor.java
1 | package com.evan.jiang.interceptor; |
然后让 拦截器生效
我们需要差不过剑对应的 config
配置
1 | package com.evan.jiang.config; |
教程中 的解释
之前我们在拦截器 LoginInterceptor 中配置的路径,即
index
,触发的时机是在拦截器生效之后。也就是说,我们访问一个 URL,会首先通过 Configurer 判断是否需要拦截,如果需要,才会触发拦截器 LoginInterceptor,根据我们自定义的规则进行再次判断。
/index
与/index.html
是不同的,也就是说/index
会触发拦截器而/index.html
不会,但根据拦截器 LoginInterceptor 中我们定义的判断条件,以/index
开头的路径都会被转发,包括index.html
。因为我们做的是单页面应用,之前通过配置 ErrorPage,实际上访问所有路径都会重定向到
/index.html
。我们直接在浏览器地址栏输入/index
会触发拦截器,经过拦截器重定向到/login
,然后/login
再经过 Configurer 的判断,再次触发拦截器,由于不在需要拦截的路径中,所以被放行,页面则重新定向到了/index.html
,如果没有再 Configurer 中取消对/index.html
的拦截,则会再次触发拦截器,再次重定向到/login
,引发如下错误。
运行后测试 访问 index 会直接跳转到 login 然后 登录后跳转到 index。
Vuex 与前端登录拦截器
需要进行安装 npm install vuex --save
在 src 目录下新建一个文件夹 store,并在该目录下新建 index.js 文件
localStorage
,即本地存储,在项目打开的时候会判断本地存储中是否有 user 这个对象存在,如果存在就取出来并获得 username
的值,否则则把 username
设置为空。这样我们只要不清除缓存,登录的状态就会一直保存。
1 | import Vue from 'vue' |
然后我们就可以在 src\router\index.js
中进行修改 对对应的需要拦截的 路由进行设置
1 | import Vue from 'vue' |
修改 src\main.js
中添加钩子函数。
router.beforeEach()
,意思是在访问每一个路由前调用。
1 | import Vue from 'vue' |
然后修改 Login.vue
1 | <template> |
然后运行
访问 index
会跳转
登录后 跳转到 index