【项目难点】电商后台管理系统

最新推荐文章于 2025-10-29 13:35:52 发布

原创最新推荐文章于 2025-10-29 13:35:52 发布 · 3k 阅读

41 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #elementui #vue.js

本文详述了一个基于Vue.js的电商后台管理系统的实现，包括登录验证、路由权限控制、用户注销、首页定制、数据持久化、权限管理、商品管理和订单管理等功能。涉及到的技术点有sessionStorage、编程式导航、路由守卫、VueQuillEditor富文本编辑器、TreeTable组件、日期格式化、Webpack配置优化、路由懒加载等。

vue-shop

1.Login.vue

1.1 通过token来控制登录成功后的行为

token的原理

将token保存在本地浏览器的sessionstorge中
在通过this.$router.push编程式导航实现跳转

this.$message.success("登录成功！");
// 1.将登录成功之后的token,保存到客户端的sessionStoryage中
//    1.1 项目中除了登录之外的其他API接口,必须在登录之后才能访问
//    1.2 token只应在当前网站打开期间生效,所以将token保存在sessionStoragezhong
window.sessionStorage.setItem("token",res.data.token);
// 2.通过编程式导航跳转到后台主页，路由地址是/home
this.$router.push('/home');

1.2 路由导航控制访问权限

路由在跳转之前要判断是否存在后端验证通过后返回的token令牌再进行放行
如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面

// 挂载路由导航守卫 
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行
  // next() 放行 next('/login') 强制跳转

  // 此时还未登录直接放行
  if (to.path === '/login') return next();
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token');
  if (!tokenStr) return next('/login');
  next();
})

2.Home.vue

2.1 退出时要清空token

logout() {
  // 清空token
  window.sessionStorage.clear();
  // 跳转到登录页
  this.$router.push("/login");
},

2.2 首页路由的重定向

// router.js
const routes = [{
    path: '/',
    redirect: '/login',
},....]

3. User.vue

3.1 通过插槽的模式实现自定义列的渲染

<el-table-column label="状态" prop="mg_state">
  <template slot-scope="scope">
<!-- 显示JSON数据<pre> {{ scope.row }}</pre> -->
    <el-switch
      v-model="scope.row.mg_state"
      @change="userStateChanged(scope.row)"
    >
    </el-switch>
  </template>
</el-table-column>

3.2 网页刷新时维持它的激活状态

// 保存链接的激活状态 存放在seesionStorage中，然后在渲染前赋值给数组activePath
saveNavState(activePath){
  window.sessionStorage.setItem('activePath',activePath);
  this.activePath = activePath;
},

4. 权限管理

4.1 power.vue

4.2 rigth.vue

5. 商品管理

5.1 Add.vue

5.1.1 发起请求时，复制this.addform对象(深拷贝)

// 采用lodash工具库
// loadsh cloneDeep(obj)
const form = _.cloneDeep(this.addForm);
form.goods_cat = form.goods_cat.join(",");

5.1.2 引用VueQuillEditor富文本编辑

// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// require styles 导入富文本编辑器对应的样式
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

5.2 Cate.vue

5.2.1 TreeTable组件的运用

// main.js
import TreeTable from "vue-table-with-tree-grid"
Vue.component('tree-table', TreeTable)

// Cate.vue
<!-- 表格 -->
<tree-table
    class="treeTable"
    :data="catelist"
    :columns="columns"
    :selection-type="false"
    :expand-type="false"
    show-index
    index-text="#"
    border
  >
    <!-- 是否有效 -->
    <template slot="isok" slot-scope="scope">
      <i
        class="el-icon-success"
        v-if="scope.row.cat_deleted === false"
        style="color: lightgreen"
      ></i>
      <i class="el-icon-error" v-else style="color: red"></i>
    </template>
    <!-- 排序 -->
    <template slot="order" slot-scope="scope">
      <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
      <el-tag
        size="mini"
        type="success"
        v-else-if="scope.row.cat_level === 1"
        >二级
      </el-tag>
      <el-tag size="mini" type="warning" v-else>三级</el-tag>
    </template>
    <!-- 操作 -->
    <template slot="opt">
      <el-button type="primary" icon="el-icon-edit" size="mini"
        >编辑</el-button
      >
      <el-button type="danger" icon="el-icon-delete" size="mini"
        >删除</el-button
      >
    </template>
</tree-table>

5.3 List.vue

5.4 Params.vue

6. 订单管理

6.1 Order.vue

6.1.1 日期的格式化处理

通过Vue.filter定义一个全局的过滤器，来格式化日期时间

Vue.filter('dateFormat', function (originVal) {

  const dt = new Date(originVal)

  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0');


  const hh = (dt.getHours() + '').padStart(2, '0');
  const mm = (dt.getMinutes() + '').padStart(2, '0');
  const ss = (dt.getSeconds() + '').padStart(2, '0');

  return `${y} - ${m} - ${d} ${hh}:${mm}:${ss}`

})

7. 数据统计

7.1 Report.vue

8. 项目优化

8.1 babel-plugin-transform-remove-console插件的使用

// 这是项目发布阶段需要用到的babel插件
const prodPlugins = []
// 如果是发布阶段,处于生产环境,就向prodPlugins数组里添加一个插件
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}
// 通过扩展运算符的形式插入插件
module.exports = {
    。。。
    // 发布产品时候的插件数组
    ...prodPlugins,
}

8.2 引入CDN来优化

8.3 修改webpack的默认配置(vue-cli 3.0 会把webpack的配置隐藏)

详情可以看官方文档 https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F

8.2.1 修改入口文件

// vue.config.js
chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
        config.entry('app').clear().add('./src/main-prod.js')
    // 开发模式 
    config.when(process.env.NODE_ENV === 'development', config => {
        config.entry('app').clear().add('./src/main-dev.js')
    })
}

8.2.2 通过webpack的externals节点加载外部CDN资源

chainWebpack: config => {。。。
config.set('externals', {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    axios: 'axios',
    lodash: '_',
    echarts: 'echarts',
    nprogress: 'NProgress',
    'vue-quill-editor': 'VueQuillEditor'
})
}

8.4 首页内容的定制

//  vue.config.js给主页传递一个值判断是否为发布模式
chainWebpack: config => {。。。
config.plugin('html').tap(args => {
    args[0].isProd = true
    return args
})}

<!-- index.html -->
<title>
  <%= htmlWebpackPlugin.options.isProd ? '' : 'dev -' %>电商后台管理系统
</title>

8.5 路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

官方文档：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

安装@babel/plugin-syntax-dynamic-import

npm install --save-dev @babel/plugin-syntax-dynamic-import

在babel.config.js中配置

将路由改成按需加载的模式