前言
本文会在宏观视野上,讲述从全栈开发到整栈开发的能力,会展示一个简单的后台开发项目片段,其中采用了element-ui作为后台界面开发框架,会分享前后台通信之间的API设计经验,以及vue3.0中使用proxy代理服务解决跨域问题。
项目目录
先创建三个项目目录,这里以ele为例,分别创建前端, 后端, 后台三个项目。
打理后台页面
<div class="login_page fillcontain">
<transition name="form-fade">
<section class="form_container form-fade-enter" v-show="showLogin">
<div class="manage_tip">
<p>elm后台管理系统</p>
</div>
<el-form :model="loginForm" :rules="rules" ref="loginForm">
<el-form-item prop="username">
<!-- 双向绑定指令 -->
<el-input v-model="loginForm.username" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<!-- 双向绑定指令 -->
<el-input v-model="loginForm.password" placeholder="密码" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('loginForm')" class="submit_btn">登陆</el-button>
</el-form-item>
</el-form>
</section>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
showLogin: false,
loginForm: {
username: "",
password: ""
},
rules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" }
],
// 渐进式
password: [
{
required: true,
message: "请输入密码",
trigger: "blur"
}
]
}
};
},
mounted() {
this.showLogin = true;
}
};
</script>
<style lang="stylus" scoped>
.login_page {
height: 100vh;
background-color: #324057;
}
.manage_tip {
position: absolute;
width: 100%;
top: -100px;
left: 0;
p {
font-size: 34px;
color: #ffffff;
}
}
.form_container {
width: 320px;
height: 240px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -120px;
margin-left: -160px;
padding: 25px;
box-sizing: border-box;
border-radius: 5px;
text-align: center;
background-color: #ffffff;
.submit_btn {
width: 100%;
font-size: 16px;
}
}
// 动态的产生四个类
.form-fade-enter-active, .form-fade-leave-active {
transition: all 1s;
}
.form-fade-enter, .form-fade-leave-active {
transform: translate3d(0, -50px, 0);
opacity: 0;
}
</style>
transtion是 vue的内置组件,当它的子元素通过生命周期函数改变v-show = "showLogin" false->true的值,从不显示到显示,就会触发,带来特效。transtion的name属性会帮我们动态产生四个类,transition-name-enter(一帧) -> transition-name-enter-active 子元素原来的样式 transition-name-enter未进入的样式 transition-name-enter-active 设置transtion-time all 1s
前后端联调
methods: {
async submitForm(formName) {
this.$refs[formName].validate(async valid => {
// console.log(valid);
if (valid) {
// 跟后端api通信吧, 登录
} else {
this.$notify.error({
title: "错误",
message: "请输入正确的用户名和密码",
offset: 100
});
}
});
}
},
$notify 是element-ui中的消息提示组件,相当于iview中的$message. 在Vue中ref相当与id属性,基于domless的理念,vue中减少dom操作,让开发更加简单,用ref代替实现id的功能。
异步ajax请求
// api 异步的ajax请求
const res = await login({
user_name: this.loginForm.username,
password: this.loginForm.password
这个login,来自api模块,为了避免冲突,后端请示都应该在api里, 这里需要导入一下
import { login } from "@/api/getData";
/**
* API定义集合文件,
* @param {*} data
*/
export const login = (data) => {
return new Promise((resolve, reject) => {
// http://127.0.0.1:8080/ 跨项目
fetch('/api/admin/login', {
method: 'POST', //请求头
body: JSON.stringify(data) //请求体 request body
})
.then(data => data.json())
.then(data => {
console.log(data, '----------')
resolve(data)
})
.catch(err => {
console.log(err)
reject(err)
})
})
}
模拟mock
把能写的代码写完,减少不确定性
if (res.status == 1) {
this.$message({
type: "success",
message: "登录成功"
});
} else {
this.$message({
type: "error",
message: res.message
});
}
这个status,是为了方便打通前后台,约定好数据接口,约定后端一定返回一个status: 1|0,来验证前后端通信是否通畅。有了这个约定,就可以不用等到后端项目都写完,处理前端业务。
后端路由模块化
const express = require('express');
const app = express();
// 路由的模块化
// api
const router = require('./routes/index.js');
router(app);
// app.use()
app.listen("3000", () => {
console.log('api 服务器上线了');
})
子路由模块
const admin = require('./admin')
module.exports = app => {
// 启用路由中间件
// 模块子路由
app.use('/admin', admin)
}
给路由添加方法
登录业务忽略
const express = require('express');
const router = express.Router();
router.post('/login', (req, res) => {
res.send({
status: 1,
message: '登录成功'
})
})
module.exports = router
跨域解决方案
vue3.0提供了这个解决方案 在后台项目根目录新建一个vue.config.js
module.exports = {
devServer: {
// '127.0.0.1:8080/api/admin/login'
proxy: {
'/api': {
target: 'http://127.0.0.1:3000',
changeOrigin: true,
// http://127.0.0.1:3000/admin/login
pathRewrite: {
'^/api': ''
}
}
}
}
}
通过proxy代理,使用正则速配,如果是/api请求则帮我们转发到3000端口下,这样就不存在跨域问题了。
写在最后
- 如果这篇文章有错误或不足之处,欢迎在评论区指出。
- 欢迎大家点赞,关注,技术交流。