一直想动手写个项目，但是前端太差，看了看某视频剪辑软件的教学视频学习了一下，开始实战

Vue 开发

//安装与卸载脚手架

新公共管理安装-g @vue/cli

新公共管理卸载-g @vue/cli

项目创建

//打开煤矿管理局

某视频剪辑软件创建whf-博客

cd whf_blog

某视频剪辑软件添加元素（添加elementui)

//成功调用插件：的生成器安装成功

新公共管理安装axios(安装axios)

//已安装一个软件包

//链接3个最新版本

//运行0脚本

//安装的所有软件包（从新公共管理注册表安装的四个软件包，使用537毫秒（网络529毫秒),速度28.23千字节/秒，JSON 4(14.93千字节)，tarball 0B)

新公共管理安装vuex -保存（安装Vuex)

//已安装一个软件包

//链接一最新版本

//运行0脚本

//安装的所有软件包（从新公共管理注册表安装的2个软件包，使用的一个（网络一个),速度23.57kB/s，json 2(32.41kB)，tarball 0B)

新公共管理安装某视频剪辑软件路由器（安装路由)

//已安装一个软件包

//链接0最新版本

//运行0脚本

//安装的所有软件包（从新公共管理注册表安装的一个软件包，使用431毫秒（网络426毫秒),速度21.64千字节/秒，JSON 1(9.22千字节)，tarball 0B)

这里就选择默认即可

安装就按部就班来，一般都没问题

目录结构

//添加目录结构

服务（网络请求)

路由器（路由配置)

商店(Vuex状态管理)

utils(工具)

视图（视图功能)

运行项目

package.json右键可以查看到显示新公共管理

点击直接运行

成功页面

View 层

模板

差异

用户名：输入类型=' text ' v-model=' loginFOrm。“用户名”占位符='请输入用户名'/

芭芭拉

密码： <input type="password" v-model="loginForm.password" placeholder="请输入密码"/> <br><br> <button v-on:click="login">登录</button> </div> </template> <script> export default { 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>

路由配置

import Vue from 'vue' //引入 Vue import VueRouter from 'vue-router' //引入 Vue 路由 import Login from '../views/login/login' Vue.use(VueRouter); //安装插件 export const constantRouterMap = [ //配置默认的路径，默认显示登录页 { path: '/login', name: 'Login', component: Login }, { path: '/', name: 'Login', component: Login } ] export default new VueRouter({ mode: 'history', //后端支持可开 scrollBehavior: () => ({y: 0}), routes: constantRouterMap //指定路由列表 })

main.js添加路由配置和axios

添加vue.config.js

module.exports = { devServer:{ port: 4000, proxy:{ '/api':{ target:'http://localhost:8080/api', changeOrigin:true, ws:true, pathRewrite:{ '^/api':'' } } } } }

创建springboot项目

User类

package com.whf.blog.bean; import lombok.Data; @Data public class User { private int userId; private String username; private String password; } package com.whf.blog.resp; import lombok.Data; @Data public class Result { private int code; private String message; } package com.whf.blog.controller; import com.whf.blog.bean.User; import com.whf.blog.resp.Result; import org.springframework.web.bind.annotation.*; @RestController public class LoginController { @RequestMapping(value = "/login",method = RequestMethod.POST) @ResponseBody public Result login(@RequestBody User user){ Result result = new Result(); if(user.getUsername().equals("admin") && user.getPassword().equals("admin")){ result.setCode(200); }else { result.setCode(400); } return result; } } package com.whf.blog; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; /** * @author suntongxin * Create on 2017年7月6日下午8:05:19 * All right reserved */ @Configuration public class CorsConfig { private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); //允许任何域名 corsConfiguration.addAllowedHeader("*"); //允许任何头 corsConfiguration.addAllowedMethod("*"); //允许任何方法 return corsConfiguration; } @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", buildConfig()); //注册 return new CorsFilter(source); } }

主要解决跨域问题

现在前后端就算打得通了登录。

springboot中文手册(vue 可视化开发工具)

Vue 开发

项目创建

目录结构

View 层

路由配置

创建springboot项目