Vue模板框架vue-admin-template上手指南

一、简介

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

二、使用

1.在编辑器中打开这个目录

2.打开编辑器终端

打开终端后，一般会自动进入到当前目录下

3.进入当前目录

如果没有自动进入，在终端中通过cd进入

4.终端输入npm install，安装依赖
5.npm run dev运行项目，

按住ctrl键，单击http://localhost:9528/打开网址。

三、源码目录结构

注意带(***)的文件（夹）

|-dist 生产环境打包生成的打包项目
|-mock 产生模拟数据
|-public 包含会被自动打包到项目根路径的文件夹
    |-index.html 唯一的页面
|-(***)src
    |-(***)api 包含接口请求函数模块
        |-table.js  表格列表mock数据接口的请求函数
        |-user.js   用户登陆mock数据接口的请求函数
    |-assets 组件中需要使用的公用资源
        |-404_images 404页面的图片
    |-components 非路由组件
        |-SvgIcon svg图标组件
        |-Breadcrumb 面包屑组件(头部水平方向的层级组件)
        |-Hamburger 用来点击切换左侧菜单导航的图标组件
    |-icons
        |-svg 包含一些svg图片文件
        |-index.js 全局注册SvgIcon组件,加载所有svg图片并暴露所有svg文件名的数组
    |-layout
        |-components 组成整体布局的一些子组件
        |-mixin 组件中可复用的代码
        |-index.vue 后台管理的整体界面布局组件
    |-(***)router
        |-index.js 路由器，配置网址的路由以实现界面跳转
    |-(***)store
        |-(***)modules
            |-app.js 管理应用相关数据
            |-settings.js 管理设置相关数据
            |-(***)user.js 管理后台登陆用户相关数据
        |-getters.js 提供子模块相关数据的getters计算属性
        |-index.js vuex的store
    |-styles
        |-xxx.scss 项目组件需要使用的一些样式(使用scss)
    |-(***)utils 一些工具函数
        |-auth.js 操作登陆用户的token cookie
        |-get-page-title.js 得到要显示的网页title
        |-request.js axios二次封装的模块
        |-(***)validate.js 检验相关工具函数
        |-index.js 日期和请求参数处理相关工具函数
    |-(***)views 视图，这个是设计展示的页面，设计好的页面需要在(***)router配置路由
        |-dashboard 首页
        |-(***)login 登陆
    |-App.vue 应用根组件
    |-main.js 入口js
    |-permission.js 使用全局守卫实现路由权限控制的模块
    |-settings.js 包含应用设置信息的模块
|-.env.development 指定了开发环境的代理服务器前缀路径
|-.env.production 指定了生产环境的代理服务器前缀路径
|-.eslintignore eslint的忽略配置
|-.eslintrc.js eslint的检查配置
|-.gitignore git的忽略配置
|-.npmrc 指定npm的淘宝镜像和sass的下载地址
|-babel.config.js babel的配置
|-jsconfig.json 用于vscode引入路径提示的配置
|-package.json 当前项目包信息
|-package-lock.json 当前项目依赖的第三方包的精确信息
|-(***)vue.config.js  webpack相关配置(如:约定服务器ip地址、解决跨域问题)

以上目录结构中带(***)的文件（夹）是接下来二次开发要编辑的部分。进行二次开发,可只保留(***)src/(***)views下的dashboard与、login文件夹与404.vue，其余的部分以后要用到可以在压缩包里选择复制粘贴过来。

修改配置：

1.关闭按ctrl+s后自动打开浏览器，在(***)vue.config.js中，找到devServer，将open改成false

devServer: {
  host: '0.0.0.0',
  port: port,
  open: false,
  proxy: {
    
    }
  },
  disableHostCheck: true
},

2.取消严格的校验规则，在(***)vue.config.js中，将以下三项设置为false：

lintOnSave: false  
devServer: {
        overlay: {
            warnings: false,
            errors: false
        },
    },

3.修改僵硬的账号校验规则，在(***)src/(***)utils/(***)validate.js中，将validUsername函数修改为：

/**
 * @param {string} str
 * @returns {Boolean}
 */

export function validUsername(str) {  
  // 首先检查str是否为空或者只包含空格  
  if (!str || str.trim() === '') {  
    return false; // 如果为空或只有空格，则返回false  
  }  
  return true;
  
}

四、修改登录接口（涉及(***)vue.config.js、(***)src/(***)api/(***)user.js、(***)src/(***)views、(***)src/(***)store/(***)modules/(***)user.js）

1.产生跨域问题的原因

访问协议、地址IP、端口号的不同

例如，前端地址：http://localhost:9528，后端地址：http://localhost:8080

解决办法：

在vue.config.js文件内
注释掉mock接口配置
配置代理转发请求到目标接口

// before: require('./mock/mock-server.js')
proxy: {
  '/dev-api': { // 匹配所有以 '/dev-api'开头的请求路径
    target: 'http://localhost:8080',
    changeOrigin: true, // 支持跨域
    pathRewrite: { // 重写路径: 去掉路径中开头的'/dev-api'，防止后续匹配的url字段重复
      '^/dev-api': ''
    }
  }
}

2.修改前端接口路径

src/api/user.js 中的 url 地址改为服务器的发送地址，

export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

export function getInfo(username) {
  return request({
    url: '/user/info',
    method: 'get',
    params: { username }
  })
}

初始化操作:

将用户名（账号）作为缓存，作为请求函数getInfo(username)的get请求参数，将

        
// 设置username到localStorage  
localStorage.setItem('username', this.loginForm.username);

添加到(***)src/(***)views/(***)login/index.vue

 handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          // 设置username到localStorage  
          localStorage.setItem('username', this.loginForm.username);
          this.$store.dispatch('user/login', this.loginForm).then(() => {

将存储的用户名缓存

// 从localStorage获取username  
let username = localStorage.getItem('username');
getInfo(username).then(response => {

添加到(***)src/(***)store/(***)modules/(***)user.js

  // get user info
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      // 从localStorage获取username  
      let username = localStorage.getItem('username');
      getInfo(username).then(response => {
        const { data } = response

为了简化退出登录操作，在(***)src/(***)store/(***)modules/(***)user.js中的

// user logout
  logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout(state.token).then(() => {
        removeToken() // must remove  token  first
        resetRouter()
        commit('RESET_STATE')
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

移除这行代码：

logout(state.token).then(() => {

这样后端就不必配置对应的接口，接收退出登录的请求

3.后端提供接口

@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;

    /**
     * 登录
     * @param user
     * @return
     */
    @PostMapping("/login")
    public Result login(@RequestBody User user){
        return userService.login(user);
    }

    /**
     * 获取用户信息
     * @param username
     * @return
     */
    @GetMapping("/info")
    public Result login(@RequestParam String username){
        return userService.info(username);
    }

}

还有对应的实体类Result、User、UserInfo，业务类UserService，业务层方法实现类UserServiceImpl，sql映射（如Mapper接口与Mapper.xml）与建表插值sql语句。

百度网盘链接，永久有效：

链接：https://pan.baidu.com/s/1VPOln8lJ99ZQeHvFogR8Xg?pwd=w77v 
提取码：w77v

五、添加一个新的页面(涉及(***)src/(***)api、(***)src/(***)router/index.js、(***)src/(***)views)

1.在(***)views新建文件夹newPage与文件newPage.vue，

2. 在文件newPage.vue中输入vue按回车，并写一个div标签“这是一个新页面”，

3.为新页面配置路由

在(***)src/(***)router/index.js中，删除先前未保留的页面form、table等，

从

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  },

之后，到

  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }

之前。

4.仿照

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  },

为页面newPage.vue配置路由

  {
    path: '/newpage',
    component: Layout,
    redirect: '/newpage',
    children: [{
      path: 'newpage',
      name: 'Newpage',
      component: () => import('@/views/newPage/newPage'),
      meta: { title: 'Newpage', icon: 'dashboard' }
    }]
  },

5.运行npm run dev,结果如下：

六、基于axios请求库，为新页面配置请求函数

1.从elementUI选择穿梭框组件，使之成为newPage.vue的页面元素，代码如下：

<template>
  <div>
    <p
      style="
        text-align: center;
        margin: 30px 0 20px;
        font-weight: bold;
        font-size: 25px;
      "
    >
      参加考试学生名单
    </p>
    <div style="text-align: center">
      <el-transfer
        style="text-align: left; display: inline-block"
        v-model="right_value"
        filterable
        :titles="['未选择学生', '已选择学生']"
        :button-texts="['移除', '加入']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}',
        }"
        @change="handleChange"
        :data="transferData"
      >
        <span slot-scope="{ option }"
          >{{ option.key }} - {{ option.label }}</span
        >
      </el-transfer>
    </div>
  </div>
</template>

<script>
import { getStudentList } from "@/api/release"; // 路径可能需要根据实际情况调整

export default {
  data() {
    return {
      right_value: [], //右边框的值
      transferData: [], // 用于穿梭框的数据s
      renderFunc(h, option) {
        return (
          <span>
            {option.key} - {option.label}
          </span>
        );
      },
    };
  },
  created() {
    this.loadStudentList();
  },
  methods: {
    async loadStudentList() {
      try {
        const queryParams = { identity: "0" };
        const response = await getStudentList(queryParams);
        this.transferData = response.data.map((student) => ({
          key: student.username,
          label: student.name,
        }));
      } catch (error) {
        console.error("Error getting student list:", error);
      }
    },
  },
};
</script>

<style>
</style>

 2.在(***)src/(***)api新建文件release.js，

请求函数代码如下：

import axios from 'axios';  
import qs from 'qs'; // 引入qs库来处理查询字符串的序列化  
  
// 创建一个通用的request函数  
function request(config) {  
  const { url, method = 'get', data = null, params = null } = config;  
  // 如果是GET请求，并且有params参数，则使用qs库将params对象序列化为查询字符串  
  if (method.toLowerCase() === 'get' && params) {  
    config.url = `${url}?${qs.stringify(params)}`;  
    // 删除data属性，因为GET请求通常不包含请求体  
    delete config.data;  
  }  
  
  return axios.request({  
    ...config,  
    // 这里可以设置其他通用的axios配置，如headers、timeout等  
  });  
};  
  
// 使用通用的request函数来定义getStudentList函数  
export function getStudentList(queryParams) {  
    // 构造带有查询参数的URL  
    const urlWithParams = `/dev-api/release/studentlist?${new URLSearchParams(queryParams)}`;  
    return request({  
      url: urlWithParams,  
      method: 'get'  
      // 注意：在GET请求中，我们通常不通过data字段传递数据  
    });  
  };

3.后端提供的接口：

@RestController
@RequestMapping("/release")
public class ReleaseController {

    @Autowired
    private ReleaseService releaseService;

    /**
     * 获取学生列表
     * @@param identity
     * @return
     */
    @GetMapping("/studentlist")
    public List<StudentToChoose> getStudentList(@RequestParam String identity){

        return releaseService.getStudentList(identity);
    }

}

还有对应的实体类StudentToChoose，业务类ReleaseService，业务层方法实现类ReleaseImpl，sql映射（如Mapper接口与Mapper.xml）与建表插值sql语句。

百度网盘链接（同上），永久有效：

链接：https://pan.baidu.com/s/1VPOln8lJ99ZQeHvFogR8Xg?pwd=w77v 
提取码：w77v

4.运行结果如下：

致谢声明：

本篇博客部分借鉴                        
原文链接：https://blog.csdn.net/m0_57037182/article/details/127684812