前后端分离式项目架构流程（爆肝三万字）
文章目录
- 个人主页：信计2102罗铠威
- JavaEE系列专栏
-
- 前言：
- 【前端】先创建Vue-cli项目，请选择此项目
-
- 【创建路由】
-
- 打开命令行工具，进入你的项目目录，输入下面命令。
- 1.创建 router 目录~创建 index.js 文件,在其中配置路由
- 2.在APP.vue中添加路由视图
- 3.在 main.js 中配置路由
- 【配置Element UI】
- 【如何使背景图片最大自适应】
- 【登录组件模板】
- 【注册组件模板】
- 【创建后端项目+数据库，先完成注册与登陆功能】
-
- 【前端配置】
-
- 安装ajax（异步请求）之axios---网络请求库.
- 在main.js中导入
- 【搭建后端tomcat服务器】
- [这是需要导入的jar包下载地址---阿里云盘](https://www.aliyundrive.com/s/gox2K1pR8RL)
-
-
- 如果使用前端ajax的axios，后端记得使用“跨域请求声明”
- 记得util包中定义commentResoult类
- 可以在util包中定义JDBC的封装类（使代码更加简洁）
- 【采用json格式的打印】
-
- 后端借助ObjectMapper类将对象转为json格式的字符串
- 【前端发送数据时，由于axios发出的异步请求格式为json格式，利用jsonToString()方法转为默认键值对格式】
- 【主面板组件模板】
-
- 【添加token令牌--临时会话跟踪】
-
- 在index.js中配置路由导航守卫
-
- 【前端配置：axios的响应拦截器、请求拦截器】=提高代码复用性
- 在main.js中导入
- 【后端配置：添加JWT jar包、创建modle包/Admin类、在util包下创建JWTUtil类、创建TokenFilter过滤器】“json web token”
-
- 添加JWT jar包
- [这是需要导入的jar包下载地址---阿里云盘](https://www.aliyundrive.com/s/gox2K1pR8RL)
-
-
-
- 先在src路径下创建一个modle包，再创建一个Admin类（这个类是存储登录界面的账户信息的）
- 添加JWT jar包
- 创建TokenFilter过滤器
-
- 【后端：】记得登录成功时，要生成一个token
-
-
- 【获取token，记得是请求头getHeader（），而不是请求体getParameter()】
-
- 【前端：】记得登录成功时，从后端响应回来的数据中将token存入临时会话存储区中
- 【组件响应的`路由跳转`--跳转至新页面】
- 路由嵌套【==组件嵌套==的路由跳转--局部跳转】
- 【css3中的一个技巧--按时放大】
- 【在一个组件中==导入外部组件==】
- `计时器setTimeout（函数名，延迟时间）`
-
- 父组件与子组件之间的信息交互 $emit 方法
-
- 父组件给子组件发信息（这个是官方的案例）
- 子组件给父组件发信息（个人案例）
- 表格Table模板
-
- 源码如下：
- 表单dalog模板
- 源码如下：
-
- 刷新页面
- 表单的二级联动
- 【持续更新中...】
个人主页：信计2102罗铠威
JavaEE系列专栏
前言：
本篇博客主要以介绍前后端分离式项目架构流程
【前端】先创建Vue-cli项目，请选择此项目
执行npm run serve命令,进入浏览器，生成此页面，说明项目创建完成·
清理默认组件内容：APP.vue 、 (删除HelloWord.vue)
【创建路由】
打开命令行工具，进入你的项目目录，输入下面命令。
npm i [email protected]
1.创建 router 目录~创建 index.js 文件,在其中配置路由
【在index.js配置】
import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */
import login from '../views/login'; /* 导入其他组件--【回头得改！】 */
import content from '../components/content'; /* 导入其他组件【回头得改！】 */
Vue.use(router)
/* 定义组件路由 */
var rout = new router({
routes: [{
path: '/index',
name: 'index',
component: index
},
{
path: '/content',
component: content
}
]
})
//导出路由对象
export default rout;
2.在APP.vue中添加路由视图
3.在 main.js 中配置路由
/* 【导入路由】 */
import router from './router/index.js'
Vue.use(router);
new Vue({
//【一个Vue对象】
render: h => h(App),
router,
}).$mount('#app')
【配置Element UI】
安装 Element UI
npm i element-ui -S
在 main.js 中写入以下内容：
//【导入Element UI 并声明vue项目使用Element UI】
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
【如何使背景图片最大自适应】
#divbox{
width: 100%;
height: 100vh;
background-image: url("[图片链接]"); /*将图片路径替换为你自己的图片路径*/
background-size: cover; /*保持图片比例并完全覆盖元素*/
background-position: center center; /*将图片居中对齐*/
}
【登录组件模板】
<template>
<div id="divbox">
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.3aeeb6d5725738095a7ad521d46ce428?rik=prLV4puYz%2btYuw&riu=http%3a%2f%2fwww.gx8899.com%2fuploads%2fallimg%2f2018021008%2fjrmgrhcgro0.jpg&ehk=Im%2fy1GA0xuqdwYNnKtzfue2b09jzjym4jjUXy7e0Seo%3d&risl=&pid=ImgRaw&r=0"
alt="Your Image">
<div class="login-form">
<div id="logo">
<span style="font-family: 'Microsoft YaHei';letter-spacing: 0.5px; font-weight: bold; font-size: 40px;">
<span style="color:#4F5155"> 欢迎登录span><span style="color:rgb(137, 204, 255) ;">宿舍管理系统span>
span>
div>
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
<el-form-item label="用户名" prop="account">
<el-input v-model="form.account" class="input">el-input>
el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password" class="input">el-input>
el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')" style="width: 300px;">登录el-button>
<br />
<span style="color: #006A5A;" @click="reg()">没有账号？点击注册span>
el-form-item>
el-form>
div>
div>
template>
<script>
export default {
data() {
return {
form: {
account: '',
password: '',
},
rules: {
account: [
{
required: true, message: '请输入账户', trigger: 'blur' },
{
min: 3, max: 5, message: '长度在 3 到 10 个字符~', trigger: 'blur' }
],
password: [
{
required: true, message: '请输入密码', trigger: 'blur' },
{
min: 3, max: 5, message: '长度在 1 到 10 个字符~', trigger: 'blur' }
],
}
}
},
methods: {
reg() {
alert("注册");
},
onSubmit(form) {
//【登录】
//数据向后端发送进行验证
//$refs是一个引用
this.$refs[form].validate((valid) => {
if (valid) {
//如果发送成功，跳转到其他组件
//【跳转语句】
this.$message({
showClose: true,message: '恭喜你，账户正确✔',type: 'success'});
/* this.$message({showClose: true,message: '输入的账户或密码错误~', type: 'error'});
this.$message({showClose: true,message: '系统忙，维修人员正在抢修！',type: 'warning'}); */
}
});
}
}
}
script>
<style>
#divbox {
width: 100%;
height: 100vh;
/*将页面背景 图片路径替换为你自己的图片路径*/
background-image: url("https://ts1.cn.mm.bing.net/th/id/R-C.b923d0630782b4e46dcbb2121b22bdbf?rik=l7wVr9wcUyyTzw&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f68%2f768.jpg&ehk=anhoZ%2fxmeecIhRHc2n9reoQbtJ2xXrvIEx0sJbLLMiI%3d&risl=&pid=ImgRaw&r=0");
/*保持图片比例并完全覆盖元素*/
background-size: cover;
background-position: center center;
/*将图片居中对齐*/
}
.login-form {
width: 442px;
height: 400px;
background-color: rgba(248, 242, 235, 0.5);
;
position: relative;
left: 455px;
top: 170px;
}
#logo {
width: 100%;
height: 60px;
/* background-color: aquamarine; */
margin-bottom: 60px;
}
.input {
max-width: 300px;
}
img {
border-radius: 50%;
width: 100px;
position: absolute;
left: 638px;
top: 50px;
}
style>
【注册组件模板】
<template>
<div id="divbox">
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.3aeeb6d5725738095a7ad521d46ce428?rik=prLV4puYz%2btYuw&riu=http%3a%2f%2fwww.gx8899.com%2fuploads%2fallimg%2f2018021008%2fjrmgrhcgro0.jpg&ehk=Im%2fy1GA0xuqdwYNnKtzfue2b09jzjym4jjUXy7e0Seo%3d&risl=&pid=ImgRaw&r=0"
alt="Your Image">
<div class="login-form">
<div id="logo">
<span style="font-family: 'Microsoft YaHei';letter-spacing: 0.5px; font-weight: bold; font-size: 40px;">
欢迎注册平台系统
span>
div>
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
<el-form-item label="用户名" prop="account">
<el-input v-model="form.account" class="input">el-input>
el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password" class="input" show-password>el-input>
el-form-item>
<el-form-item label="确认密码" prop="password1">
<el-input type="password" v-model="form.password1" class="input" show-password>el-input>
el-form-item>
<el-form-item>
<el-button type="primary" @click="RegAccount('form')" style="width: 300px;">注册el-button>
<br />
<span style="color: #006A5A;" @click="login()">已有账号？点击返回span>
el-form-item>
el-form>
div>
div>
template>
<script>
export default {
data() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.form.password1 !== '') {
this.$refs.form.validateField('password1');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.form.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
form: {
account: '',
password: '',
password1: ''
},
rules: {
account: [{
required: true,
message: '请输入注册的管理员账户！',
trigger: 'blur'
},
{
min: 3,
max: 10,
message: '长度在 3 到 10 个字符',
trigger: 'blur'
}
],
password: [{
required: true,
message: '请输入账户密码！',
trigger: 'blur'
},
{
min: 3,
max: 10,
message: '长度在 3 到 10 个字符',
trigger: 'blur'
},{
validator: validatePass, trigger: 'blur' }
],
password1: [{
required: true,
message: '请再次确认账户密码！',
trigger: 'blur'
},
{
min: 3,
max