vue

2023-08-26 23:21| 来源: 网络整理| 查看: 265

1.vue-admin-template简介

官网https://panjiachen.github.io/vue-element-admin-site/zh/

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。

总的来说，是一个已经很完善得前端模板框架，直接拿来可以进行开发，只需要更改其中的小部分代码，即可实现前后端交互。并且vue已经整合了axios，babel等组件

2.vue-admin-template目录结构

前端页面环境使用的框架模板，主要基于两种技术实现的对vue和emui进行的封装

挑重点的说

1.前端框架入口 config中的 index.html 下面的 main.js 3.框架中build目录存放项目构建的脚本文件，（不需要更改变动） 4.框架中config目录 index.js 一些想主机，端口号等基本配置设置useEslint: false,//关掉代码检查 dev.env.js 如果是开发环境就执行这个js，因为启动的时候是npm run dev 所以是开发环境。到后期修改里面的后端接口地址。 BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"', https://easy-mock.com这个地址经常不能访问，所以后期要改为本地（临时），再后来要添加权限框架spring secutiry prod.env.js 如果是生产环境执行这个js 5.框架中src目录（主要写方法，写路由，写页面） (改)api---定义调用的方法 assets----存放静态资源 components----组件 icons----矢量图标 (改)router----vue路由（菜单栏）（页面中调用） utils----公共的工具 (改) views----写页面

3.登录功能交互流程及编码

1.首先打开打开config中dev.env.js

module.exports = merge(prodEnv, { NODE_ENV: '"development"', // BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"', BASE_API: '"http://localhost:8001"',//后端接口 })

如图，将BASE_API改为自己项目的后端接口地址，

2.进行登录调用两个方法，login登录操作方法，和info登录之后获取用户信息的方法，所以，创建接口的两个方法实现登录。

这两个方法在src-api的login.jd时登录接口

export function login(username, password) { return request({ url: '/eduservice/user/login', method: 'post', data: { username, password } }) }

这个只写了login一个info（显示用户信息没写）

打开store->module中的user.js

import { login, logout, getInfo } from '@/api/login' import { getToken, setToken, removeToken } from '@/utils/auth' Login({ commit }, userInfo) { const username = userInfo.username.trim() return new Promise((resolve, reject) => { login(username, userInfo.password).then(response => { const data = response.data setToken(data.token) commit('SET_TOKEN', data.token) resolve() }).catch(error => { reject(error) }) }) },

从store->module中的user.js中，可以看出来，这个Login方法通过引用api中login.js中的login方法，将后端传过来的数据封装到token中

所以在后端controller中创建login方法与前面对应

@RestController @RequestMapping("/eduservice/user") @CrossOrigin//解决跨域问题 public class EduLoginController { //login @PostMapping("login") public UnResult login(){ return UnResult.ok().data("token","admin"); } }

返回的同样是token。

再根据后端写的方法，修改前端中src-api的login.jd时登录接口，url和method请求方式要和后端对应

至此登录功能完成，可以登录但是没有连接数据库，登录条件。目前任意登录

重启前后端测试，测试的时候应注意下面跨域问题

测试，报错 No 'Access-Control-Allow-Origin Access to XMLHttpRequest at 'http://localhost:8001/eduservice/user/login' from origin 'http://localhost:9528' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

跨域问题： No 'Access-Control-Allow-Origin，也就是通过一个地址去访问另一个地址，这个过程中如果访问协议，IP地址，端口号任何一个不一样，则不能访问本项目中：前端是'http://localhost:9528 后端是'http://localhost:8001 访问协议和IP地址都相同但是端口号不同，则存在跨域问题！！！跨域问题解决：（1）在后端接口controller添加注解（常用） @CrossOrigin//解决跨域问题（2）使用网关gateway

【本文地址】

vue

vue

今日新闻

推荐新闻