打通Vue开发前后台业务的任督二脉
2020/3/4 11:01:18
本文主要是介绍打通Vue开发前后台业务的任督二脉,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
本文会在宏观视野上,讲述从全栈开发到整栈开发的能力,会展示一个简单的后台开发项目片段,其中采用了element-ui作为后台界面开发框架,会分享前后台通信之间的API设计经验,以及vue3.0中使用proxy代理服务解决跨域问题。
项目目录
先创建三个项目目录,这里以ele为例,分别创建前端, 后端, 后台三个项目。
打理后台页面
copyable" lang=""> <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端口下,这样就不存在跨域问题了。
写在最后
- 如果这篇文章有错误或不足之处,欢迎在评论区指出。
- 欢迎大家点赞,关注,技术交流。
这篇关于打通Vue开发前后台业务的任督二脉的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南