配置跨域
在config文件中的index.js里面设置proxyTable
在里面配置地址 有三个参数（target: 基础地址也就是地址的相同的域名， changeOrigin为true: 允许转发， pathRewrite: 重写路径）
proxyTable: { //跨域代理
"/api":{ //地址
target:"http://admintest.happymmall.com/manage", //基地址
changeOrigin:true,//允许转发
pathRewrite:{ //路径重写
"^/api":""
}
}
},
对axios进行封装
在src目录下创建 utils的文件夹，在utils文件夹里创建request.js文件 然后在里面引入axios 创建实例 const service 然后进行请求拦截 响应拦截 最后将这个实例request导出
import axios from 'axios'
// axios的二次封装
const service=axios.create({
// baseURL:"/api", 如果配置了对象 这两个就不需要写
// timeout:3000
})
// axios请求拦截
service.interceptors.request.use((config)=>{
return config
})
// axios响应拦截
service.interceptors.response.use((config)=>{
//可以写一些逻辑
return config
})
let Request=(params)=>{
return new Promise((resolve,reject)=>{
service({
...params //es6对象的结构赋值
}).then((res)=>{
resolve(res)
}).catch((err)=>{
reject(err)
})
})
}
export {Request}
封装接口
统一的接口配置文件： 便于后期的修改、维护
// 登录接口;
//有数据的时候 传一个参数
export const login = (obj) => Request({
url: "/api/user/login.do",
method:"post",
params:obj
})
// 主页数据
//没有时就不需要
export const home = () => Request({
url: "/api/statistic/base_count.do",
method:"get",
})
登陆页面
运用全局守卫的方式 在main.js里面
进行页面的登录鉴权使用 beforeEach的路由钩子 它有三个参数 分别是 to from next
to 是 要到哪里 from 是从哪里来 next 是 让它进入下一个
获取登录的权限信息 将它转化为字符串形式 然后进行判断
如果没有登录就跳转到登录页 登陆成功则进入首页
并设置登录过期的时间
main.js
// 用全局路由钩子 进行页面的登录鉴权
router.beforeEach((to, form, next) => {
// 对权限的获取
const role = localStorage.getItem("admin")
// 字符串转对象
const val = JSON.parse(role) //val是登录信息
console.log(val);
// 设置登陆过期
if (val !== null) {
const timeEnd = Date.now() - val.time;
if (timeEnd > val.expire) {
localStorage.removeItem("admin")
next("/login")
return null
}
}
// 没有登陆跳转登陆页面
if (!val && to.path !== "/login") {
next('/login')
}
next()
})
login.vue
demo
<div class="login">
<div class="lk">
<p>欢迎登录-MMALL管理系统</p>
<input
type="email"
class="form-control"
id="exampleInputEmail1"
placeholder="User Name"
v-model="username"
/>
<input
type="password"
class="form-control"
id="exampleInputEmail2"
placeholder="Password"
v-model="password"
/>
<button type="button" class="btn btn-primary btn-lg btn-block" @click="login()">
登录
</button>
</div>
</div>
script
首先需要引入 登录的接口
import { login } from "../request/http.js";
export default {
name: "DsHelloWorld",
data() {
return {
username: "admin",
password: "admin",
num: "",
};
},
mounted() {},
methods: {
login() {
if (this.username == "") {
return alert("用户名不可以为空");
}
if (this.password == "") {
return alert("密码不可以为空");
}
var form = { username: this.username, password: this.password };
// console.log(qs.stringify(form));
login(form)
.then((res) => {
console.log(res);
this.num = res.data;
this.loading();
})
.catch((err) => {
return false;
});
},
loading() {
if (!this.num.status) {
// 如果登录返回0，提示成功，
this.$message({
message: "恭喜你，登录成功",
type: "success",
});
// 设置token过期时间, 本地存储过期时间
const obj = {
time: Date.now(),
expire: 1000 * 60 * 1, //分钟
data: this.username,
};
localStorage.setItem("admin", JSON.stringify(obj));
// this.$router.push('/index')
this.$router.push({
path: "/index",
params: { user: this.username },
});
} else {
this.$message({
message: this.num.msg,
type: "warning",
});
}
},
},
};
首页布局
它分为左右两个部分 左边是 菜单栏 右边是 一个容器
菜单栏里面 分别是 首页 商品管理 品类管理 订单管理 用户列表 然后通过接口 对他们进行 请求数据
- 首页部分
有一个 点击进入相对应的数据 使用 this.$router.push（’要进入的页面地址‘） - 商品管理 它里面有 搜索功能 添加功能 查看信息 编辑信息 的功能
搜索功能：它是可以根据 id 和 name 进行搜索 利用关键字来进行搜索
先判断是id还是name 如果是id 就让她的type为productId,如果是name 就让她的 type为productName来进行搜索
然后对请求的数据进行搜索 如果没有 id或者name 就让它获取全部的数据
代码如下
search() {
console.log(this.value);
if (this.value) {
if (this.value == "ID") {
this.type = "productId";
} else {
this.type = "productName";
}
searchIDName({
[this.type]: this.input,
pageNum: this.obj.pageNum,
}).then((res) => {
console.log(res);
this.tableData = res.data.data.list;
this.total = res.data.data.total;
});
}else{
shoplist({pageNum: this.obj.pageNum}).then(res=>{
this.tableData = res.data.data.list;
this.total = res.data.data.total;
})
}
},
添加功能：点击按钮让它跳转到添加页面 在data里面设一个对象里面写要存放的内容 然后 将里面的内容添加到商品管理的数据中 然后返回商品管理数据
<script>
export default {
data() {
return {
list: {
categoryId: 1,
name: "",
subtitle: "",
stock: "",
imageHost: "",
subImages: "",
detail: "",
price: "",
}
},
},
methods: {
onSubmit() {
console.log("submit!");
updateProduct(this.list).then((res) => {
console.log(res);
this.$message({
type: "success", // success error warning
message: res.data.data,
});
this.$router.push("/shop");
});
},
},
}
</script>
- 上架下架
利用过滤器的方法在filters里边定义两个函数，来操作上架下架的切换功能
// 利用过滤器 三元表达式 将状态变为 文字
filters: {
types(val) {
console.log(val);
return val == 1 ? "在售" : "已下架";
},
types2(val) {
return val == 2 ? "上架" : "下架";
},
},
然后在标签上绑定一个事件然后使用@click.prevent阻止默认事件
// 上下架操作
UnderComm(val) {
this.$confirm("此操作将上架商品, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
updataStatus({ productId: val.id, status: val.status == 1 ? 2 : 1 }).then(
(res) => {
console.log(res.data);
shoplist({ pageNum: this.obj.pageNum }).then((res) => {
console.log(res);
this.tableData = res.data.data.list;
this.total = res.data.data.total;
});
}
);
this.$message({
type: "success",
message: res.data.data,
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消",
});
});
},
},
- 富文本的使用
下载这个插件 cnpm install vue-quill-editor -S
在main.js中全局引入
// 富文本
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
然后在页面中使用
<quill-editor
v-model="form.detail"
@change="editChange($event)"
style="height: 100px;width: 500px;margin-top: 10px"
>
</quill-editor>
method:{
editChange() {}
}
- 上传图片 利用element Ui组件里面的 上传 然后 在页面上写上上传图片的插件 他有一个action 是图片上传的接口 它还有一个必填的属性 on-success 是上传成功后出发的，它里面还有三个属性 分别是 上传的图片的地址， 拿到图片地址后 ， 通过添加或编辑的接口把地址传过去就可以实现上传图片了
<template>
<div》
<el-form-item label="商品图片">
<el-upload
class="upload-demo"
action="/api/product/upload.do"
name="upload_file"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="success"
list-type="picture"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {
//这是上传图片的
handlePreview(file) {
console.log(file);
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
//上面两个在添加中用不到，只用这个上传成功的方法
success(response) {
console.log(response); //response 这个参数是方法自带的，不用传 代表的是添加的图片信息，是个对象
this.list.mainImage = response.data.uri; //这个是获取那个图片的路径
this.list.subImages = response.data.uri; //这个是获取那个图片的路径
},
},
}
</script>
查看信息：传此数据的ID 然后 进行 接收 再将接收的数据 赋给要使用的 地方 进行数据显示
编辑信息：传此数据的id 将数据回填 给确定按钮一个点击事件 让修改的数据 对 原数据 进行 赋值 然后将修改的数据 传递到商品管理中 然后返回商品管理数据
- 品类管理
添加商品： 在data里面写一个对象 存数据 然后获取 一级分类的接口 然后 进行添加 如果 没有输入名称 将提示 请输入商品名称 否则 添加成功 跳转到品类管理
<template>
<div class="box">
<p class="title">品类管理--添加品类</p>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="所属分类">
<el-select v-model="form.region" placeholder="请选择" @click="regionOne">
<el-option
v-for="(item,index) in oneList"
:key="index"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
</div>
</template>
<script>
import { oneList, addpl } from "../../request/http.js";
export default {
data() {
return {
form: {
region: "",
name: "",
},
oneList: [],
};
},
mounted() {
oneList().then((res) => {
this.oneList = res.data.data;
});
this.getpl();
},
methods: {
getpl() {
oneList().then((res) => {
console.log(res);
this.oneList = res.data.data;
// console.log(this.oneList);
});
},
//获取一级分类
regionOne(v) {
console.log(v);
this.oneList.map((item,i)=>{
if(v == item.name){
oneList({categoryId: item.id }).then((res=>{
this.form = res.data.data
}))
}
})
},
//添加商品
onSubmit() {
if (this.form.name == "") {
alert("请输入商品名称");
} else {
alert("商品添加成功");
addpl(this.form).then((res) => {
this.$router.push("/fei");
});
}
},
},
};
</script>
编辑名称： 点击编辑 出现一个模态框 对数据进行修改
editPl(val) {
console.log(val);
this.dialogVisible = true;
this.input = val.name;
},
enter() {
editPl({ categoryId: this.id, categoryName: this.input }).then((res) => {
console.log(res);
});
this.dialogVisible = false;
alert("修改数据成功");
this.$nextTick(function () {
this.shuju();
});
},
查看子类名称 ： 传categoryId 获取它的数据 就可进行查看 它里面有一个 修改的功能 与编辑名称的写法一样 然后进行提示
- 订单管理
搜索功能： 同样 利用关键字进行搜索使用搜索的接口的 传入它搜索的值 搜索成功 将获取到搜索内容
search() {
searchOrder({
listType: this.input,
pageNum: this.obj.pageNum,
orderNo: this.input,
}).then((res) => {
console.log(res);
this.tableData = res.data.data.list;
this.total = res.data.data.total;
});
},
查看信息： 传此数据的id 在另一个页面进行接收 然后赋给要使用的 地方 进行数据显示
// 跳详情
toOrderDetail(val) {
console.log(val);
this.$router.push({
path: "/ordersee",
query: {
// url的参数, 类似get请求的传参
orderNo: val.orderNo,
},
});
},
- 用户列表
里面没有什么 功能 就是对 用户列表 进行请求数据
以上是happymall后台管理项目的总结
扫一扫
1036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
