MMALL 管理项目总结

最新推荐文章于 2024-09-21 18:46:25 发布

缚塵

最新推荐文章于 2024-09-21 18:46:25 发布

阅读量266

点赞数

分类专栏：项目总结文章标签：前端

本文链接：https://blog.csdn.net/xinshoudandan/article/details/125107302

版权

本文总结了使用 Vue.js 开发 MMALL 管理项目的经验，包括采用 vue-cli2 构建脚手架，集成 axios 和 element-ui，以及实现登录、分页、数据查询、添加、编辑和查看详情等功能。通过服务器代理解决跨域问题，使用富文本编辑器和自定义分页器提升用户体验。

摘要由CSDN通过智能技术生成

首先该项目使用了 vue-cli2 axios element-ui 富文本编辑器服务器代理

一、使用vue-cli2 创建脚手架，下载并引插件 axios和element-ui 框架，element-ui框架按需引入或者引入全部的后续筛选只留下使用到的插件；axios下载完成以后新建文件夹，在新建文件夹内新建api.js文件并引入axios并对其进行二次封装，在新建文件下内在新建一个http.js文件，引入封装好的api，并封装post和get请求。

vue init webpack '项目名称' 


cnpm i axios --save-dev   //下载axios



cnpm i element-ui --save-dev  // 下载element-ui


新建api文件夹，在api文件夹下新建api.js和http.js文件，在api.js中引入axios

import axios from 'axios'

const service = axios.create({})   //创建axios实列

service.interceptors.request.use((config)=>{        // 请求拦截器
  return config
})

service.interceptors.response.use((config)=>{        // 响应拦截器
  return config
})

let Request = (obj) =>{
    // console.log(params)
    return  new Promise((resolve,reject) =>{
        service({
            ...obj   
        }).then((res) =>{
            resolve(res)
        }).catch((err) =>{
            reject(err)
        })

    })
}
export {Request}



在http.js文件中 引入并封装请求方式
import {Request} from '../index'

export  const postLogin =  (obj) => Request({
    url: "/api/user/login.do",
    method:"post",
    params:obj
})



在main.js中引入element-ui框架，按需引入或者引入全部的后续筛选只留下使用到的插件，比如 Button 和 Select

import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

二、在App.vue中配置基础全局样式；设置完成以后在config文件夹下的index.js中的 proxyTable 中配置代理并设置代理请求头为/api，

在App.vue中配置基础全局样式

html,body,#app {
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}


在config文件夹下的index.js中的 proxyTable 中配置代理并设置代理请求头为/api


proxyTable: {
      "/api":{
        target:"http://adminv2.happymmall.com/manage",//转发目标路径
        changeOrigin:true,  //允许转发
        pathRewrite: { //重写
          '^/api': ''
        }
      }
    },

三、新建登录页面并配置路由，在登陆页通过已封装的post请求去发送账号密码到后台，通过后台的反馈来判断是否登录成功，当灯枯成功时后台会反馈一个cooke值该值存在时即为登陆成功，登录成功后设置过期时间并存储到本地存储，之后跳转至首页页面

      axios
        .post(
          `/api/user/login.do?username=${this.ruleForm.username}&password=${this.ruleForm.password}`
        )
        .then((res) => {
          console.log(res);
          if (res.status == 200) {
            this.$message({
              message: "恭喜您登录成功",
              type: "success",
            });
            const obj = {