首页 > 其他分享> 文章详细

尚医通——前端搭建——改造模板01

2021-09-28 00:02:39 阅读：276 来源： 互联网

标签：src 01 尚医通 admin vue 模板 commit data 路由

目录标题

0、项目简介
1、临时登录接口
- 1.1 前端登录问题
- 1.2 登录页修改
2、页面零星修改
3、路由分析
- 3.1 入口文件中调用路由
- 3.2 路由模块中定义路由

0、项目简介

vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。

GitHub地址：https://github.com/PanJiaChen/vue-admin-template

建议：你可以在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱，想要什么功能或者组件就去 vue-element-admin 那里复制过来。

# 解压压缩包
# 进入目录
cd vue-admin-template-master
# 安装依赖
npm install
# 启动。执行后，浏览器自动弹出并访问http://localhost:9528/
npm run dev

在这里插入图片描述

1、临时登录接口

1.1 前端登录问题

默认情况下，前端项目已经实现了登录功能，后端连接到远程Mock平台的模拟数据接口进行登录，而Mock平台地址无效，导致前端的登录功能无法执行

1.2 登录页修改

将登陆相关请求接口改为静态数据，不请求接口
修改文件：\src\store\modules\user.js
注释掉：Login、GetInfo、LogOut三个方法，替换为如下代码：

Login({ commit }) {
const data = {
'token': 'admin'
}
setToken(data.token)// 将token存储在cookie中
commit('SET_TOKEN', data.token)
},

GetInfo({ commit }) {
const data = {
'roles': [
'admin'
],
'name': 'admin',
'avatar': 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
}
if (data.roles &&data.roles.length >0) { // 验证返回的roles是否是一个非空数组
commit('SET_ROLES', data.roles)
  }
  commit('SET_NAME', data.name)
  commit('SET_AVATAR', data.avatar)
},

// 登出
LogOut({ commit, state }) {
return new Promise((resolve, reject) => {
    commit('SET_TOKEN', '')
    commit('SET_ROLES', [])
    removeToken()
    resolve()
  })
}

说明：token是我们手动配置的，如果过期后续自行生成，后续会有TokenHelper类生成token，在此不用关注
修改\src\util\request.js

config.headers['token'] = getToken()

2、页面零星修改

2.1标题

index.html（项目的html入口）

<title>尚医通管理平台系统</title>

2.2 国际化设置

打开 src/main.js（项目的js入口），第7行，修改语言为 zh-CN，使用中文语言环境，例如：日期时间组件

import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

2.3 导航栏文字

src/views/layout/components（当前项目的布局组件）
src/views/layout/components/Navbar.vue
13行

<el-dropdown-item>
    首页
</el-dropdown-item>

17行

<span style="display:block;" @click="logout">退出</span>

2.4 面包屑文字

src/components（可以在很多项目中复用的通用组件）
src/components/Breadcrumb/index.vue

meta: { title: '首页' }

2.5 关闭校验

打开 config/index.js，配置是否开启语法检查

useEslint: false,

2.6 复制icon图标

将vue-element-admin/src/icons/svg 中的图标复制到 guli-admin项目中

3、路由分析

3.1 入口文件中调用路由

src/main.js

...
import router from './router'//引入路由模块
...
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

3.2 路由模块中定义路由

src/router/index.js

...
export const constantRouterMap = [
...

  { path: '*', redirect: '/404', hidden: true }
]

export default new Router({
// mode: 'history', //后端支持可开
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})

说明：我们后续菜单路由就在此配置

标签：src,01,尚医通,admin,vue,模板,commit,data,路由
来源： https://blog.csdn.net/david2000999/article/details/120519678

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9