6 Star 0 Fork 0

gugengbing / CTSdemoV3

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

买吧项目管理

1、环境准备

效果地址:http://124.223.14.236:7006/public/admin/index.html#/dashboard

接口地址: http://124.223.14.236:7006/admin

1.1、界面改造

  • 登录界面 login.vue

    image-20230320141152170

image-20230320141219995

  • 环境变量标题名称

    image-20230320141343266
  • index.html里面修改标题

    image-20230320141426395
  • 侧边栏logo的文字

    image-20230320141630835

image-20230320141723827

1.2、 修改基准地址

image-20230320141929908

2、登录流程

  • 登录页面login.vue 修改表单的字段

    image-20230320144229242

  • 发生请求,存储token

    image-20230320144309184

  • 修改请求方法

    image-20230320144331093

  • 响应拦截器里面,修改代码

    image-20230320144416497

3、导航守卫和获取用户资料

image-20230320151409674 image-20230320151442876

image-20230320151507451

image-20230320151533278

image-20230320151555339

4、使用mock模拟退出请求

image-20230320155458416

image-20230320155045463

image-20230320155149853 image-20230320155303866 image-20230320155352763

5、配置路由和权限介绍

5.1、路由配置

注意:下级路由的配置,不能已/开头,程序到时候会自动给你带上上级

路径 层级 组件 作用
/dasboard 2级 views/index.vue 数据面板
/good 1级 layout 商品管理【目录】
/good/category 2级 views/good/category.vue 分类管理
/good/commodity 2级 views/good/commodity.vue 商品管理
/good/seek 2级 views/good/seek.vue 求购管理
/topic 1级 layout 帖子管理【目录】
/topic/ 2级 views/topic/topic.vue 帖子列表
/user 1级 layout 用户管理【目录】
/user/ 2级 views/user/user.vue 用户列表
/message 1级 layout 信息管理【目录】
/message/inform 2级 views/message/inform.vue 举报信息
/message/message 2级 views/message/message.vue 消息公告
/adv 1级 layout 广告管理【目录】
/adv/ 2级 views/adv/adv.vue 广告管理

创建对应的页面文件

image-20230320163304655

定义路由位置: router/index.js

// 动态路由,基于用户权限动态去加载
export const dynamicRoutes = [
  {
    path: '/good',
    component: Layout,
    redirect: '/good/category',
    meta: { title: '商品管理', icon: 'good' },
    children: [
      {
        path: 'category',
        component: () => import('@/views/good/category'),
        name: 'category',
        meta: { title: '分类管理', icon: 'good' }
      },
      {
        path: 'commodity',
        component: () => import('@/views/good/commodity'),
        name: 'commodity',
        meta: { title: '商品管理', icon: 'dashboard' }
      },
      {
        path: 'seek',
        component: () => import('@/views/good/seek'),
        name: 'seek',
        meta: { title: '求购管理', icon: 'dashboard' }
      }
    ]
  }
  // 其他模块的路由配置
]
  • 图标放在assets/icons/svg/xxx.svg 注意清楚干净,不要有填充色

5.2、权限相关

  • 此项目没有权限,如果有权限需要处理以下逻辑

    image-20230320164004785

image-20230320163919862

  • 有权限,如果有权限需要处理以下逻辑

    image-20230320164248812

image-20230320164217142

image-20230320164422216

image-20230320164508916

6、功能模块的增删改查

略...

7、打包

image-20230320164729361

  • 准备工作: 修改接口的基准地址.env.production
  • 打包指令: npm run build:prod
  • 产出内容: dist目录,提交给后端去部署即可。 如果本地要预览:需要通过vscodeliveServe插件对dist目录单独打开起服务的方式。

空文件

简介

cts项目,v3版本开发 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/gugengbing/ctsdemo-v3.git
git@gitee.com:gugengbing/ctsdemo-v3.git
gugengbing
ctsdemo-v3
CTSdemoV3
main

搜索帮助