Day05项目[讲师管理模块前端开发]
前端开发
浏览：900 次
将登录转换为本地界面
1、 跨域配置
1.什么是跨域
当浏览器从一个域名的网页请求另一域名的资源时，域名、端口或协议的任何差异都是跨域的。在前端和后端分离的开发中，您需要考虑ajax跨域的问题。
这里我们可以从服务器解决这个问题
2.配置
在Controller类上添加注释
@CrossOrigin//跨域
01-项目路线
1、 后台系统路由实现分析
1.条目文件中的调用路由
src/main.js文件
......
从“”导入路由器/router'//导入路由模块
......
新Vue({
el:“#app”，
路由器，//安装路由
百货商店
渲染：h=>h（app）
})
2.路由模块中定义的路由
src/router/index.js
......
导出常量常量路由器映射=[
......
]
导出默认新路由器({
......
路由：constantRouterMap
})
2、 路线定义
1.复制图标
将vue元素admin/src/icons/svg中的图标复制到gui管理项目
2.修改路线
修改src/router/index Js文件，重新定义constantRouterMap
注意：每条路线的名称不能相同
{
路径：“/tacher”，
组件：布局，
重定向：“/tacher/table”，
姓名：“讲师管理”，
元：｛title:“讲师管理”，图标：“示例”｝，
儿童：[
{
路径：“table”，
名称：“讲师名单”，
component:（）=>导入（'@/views/edu/tacher/list'），
元：｛标题：“讲师列表”，图标：“表格”｝
},
{
路径：“tree”，
name:'添加讲师'，
组件：（）=>导入（“@/views/edu/tacher/save”），
元：｛title:“添加讲师”，图标：“树”｝
}
]
},
3.创建vue组件
在src/views文件夹下创建以下文件夹和文件
列表.vue
<模板>
讲师名单
保存.vue
<模板>
讲师添加
02-使用nginx配置后台多服务器api
1、 轻松模拟项目
配置/dev.env。js_API是项目的easymock地址。目前，它具有模拟登录、注销和获取用户信息的功能
BASE_API:'“https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin "',
登录：/user/Login
获取用户信息：/user/info？令牌=管理员
注销：/user/logout
配置/dev.env。Js，只有一个API地址配置位置，而我们的实际后端有很多微服务，所以有很多接口地址，
我们可以使用nginx反向代理将不同的api路径分发到不同的api服务器
2、 配置nginx反向代理
1.为windows安装nginx
将nginx-1.12.0.zip解压缩到开发目录
例如：E:development ginx-1.12.0-guli-api
双击nginx。exe运行nginx
访问：本地主机
2.配置nginx代理
在Nginx中配置相应的微服务服务器地址
注意：最好将默认端口80更改为81
3.重启nginx
nginx-s重新加载
4.测试
https://localhost:9001/eduservice/teacher/pageTeacherCondition/1/10
3、 配置开发环境
1.修改配置/开发。环境.js
BASE_API:'“https://127.0.0.1:9001 "'
2.重新启动前端程序
修改配置文件后，手动重新启动前端程序
03讲师管理列表组件
1、 分页列表
1.定义api
创建文件src/api/edu/teacher.js
从“@/utils/request”导入请求
导出默认值{
//1讲师名单（条件查询页面）
//当前当前页，限制每页记录数，以及teacherQuery条件对象
getTeacherPageList（当前、限制、教师查询）{
返回请求({
//url:'/eduservice/tacher/pageTeacherCondition/'+当前+'/'+限制，
url:`/eduservice/tacher/pageTeacherCondition/${current}/${limit}`，
方法：“post”，
//数据意味着将对象转换为json并将其传输到接口
//数据表明对象转换json被传输到接口
数据：teacherQuery
})
}
}
2.初始化vue组件
src/views/edu/tacher/list.vue
<模板>
讲师名单
<脚本>
//介绍并打电话给老师。js文件
从“@/api/edu/tearch”导入教师
导出默认值{
//写入核心代码位置
//数据：{
// },
data（）｛//定义
