一、简介
github地址：https://github.com/PanJiaChen/vue-admin-template二、使用
1.在编辑器中打开这个目录
2.打开编辑器终端
3.进入当前目录
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
提取码：w77v4.运行结果如下：
致谢声明：
本篇博客部分借鉴
原文链接：https://blog.csdn.net/m0_57037182/article/details/127684812
6552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
