可以参考happymmall接口
接口地址：http://adminv2.happymmall.com/login?redirect=%2Fproduct%2Findex
首先呢，我们可以先从创建vuecli2脚手架说起
1： 第一步：搭建node运行环境，根据操作系统选择相应安装包
下载地址：https://nodejs.org/en/download/ 检验是否安装成功，命令行中直接输入node -v，返回版本号即可。
2：第二步：安装webpack npm install webpack -g
3：第三步：安装脚手架 npm install -g @vue/cli-init
4： 第四步：创建项目 使用vue init webpack my-project命令创建项目，其中my-project为项目名称，然后根据提示，配置项目的相关属性信息，其中包括项目名称、项目描述、作者，是否使用路由等相关设置。
配置完项目信息后，等待项目的创建，项目创建后，根据命令行工具的提示，cd到项目目录，然后输入提示信息，会自动开启一个本地服务器。
一、 我们可以对项目进下一些插件下载和封装
插件有 axios element-ui 富文本插件
axios安装插件 npm i axios --save
element-ui安装插件 npm i element-ui -S
副文本安装插件 npm install vue-quill-editor -S
1.1. 我们可以封装axios
1.1.1 设置服务代理在 config/index.js 里边找到proxyTable进行配置代理
proxyTable: {
"/api":{
target:"http://admintest.happymmall.com/manage",//转发目标路径
changeOrigin:true, //允许转发
pathRewrite: { //重写
'^/api': ''
}
}
},
1.1.2 我们在src目录下创建一个utils文件夹，在文件夹里边创建一个requset.js文件，用来二次封装axios
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}
1.1.3 我们可以在src目录下在创建一个request文件夹。在文件夹里边创建一个index.js，用来统一的接口配置文件：便于后期项目需求的更改，接口参数变更 方便项目的后期维护，修改等…
先引入封装好的axios
import { Request } from "../utils/request"
// 登录页面
export const login = (obj) => Request({
url: "/api/user/login.do",
method: 'post',
params: obj
})
二 、接下来就是我们项目的开始
2.1 登录接口
2.1.1 我们在登录的时候可以给登录页面配置全局的路由守卫，这样我们如果没有登录的情况下，就可以守卫登录页面，全局路由守卫可以在main.js里边进下配置，
router.beforeEach((to, from, next) => {
const role = localStorage.getItem("admin")
const val = JSON.parse(role)
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()
})
2.1.2 在我们登录的登录按钮的事件中，我们可以设置token的过期时间，本地的存储时间，提示语句
// 设置token过期时间, 本地存储过期时间
const obj = {
time: Date.now(),
expire: 1000 * 60 * 10, //分钟
data: this.username
};
localStorage.setItem("admin", JSON.stringify(obj));
2.2 配置一些页面，有商品管理，品类管理，订单管理，用户列表几个页面，
（商品管理页面有搜索、添加、查看、编辑、状态等功能）
2.2.1、搜索功能的实现，先判断使用什么查询，然后把要搜索的搜索框的值赋值给接口进行搜索，最后在重新渲染页面搜索接口/api/product/search.do post
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.currpage }).then(
res => {
// console.log(res);
this.tableData = res.data.data.list;
this.total = res.data.data.total;
}
);
} else {
shoplist(this.obj).then(res => {
// console.log(res);
this.tableData = res.data.data.list;
this.total = res.data.data.total;
// console.log(this.total);
});
}
},
2.2.2、添加功能的实现，在添加页面我们实现了数据添加，所属分类，上传图片，富文本等一些功能，添加接口/api/product/save.do get
2.2.2.1、添加数据 ，我们可以利用更新的接口，将我们添加的数据传到后端，进下添加
2.2.2.2、所属分类，我们可以先拿到分类的接口，然后对分类的数据进下map（map的回调函数会将执行结果返回，最后map将所有回调函数的返回值组成新数组返回。）遍历，然后判断我们一级分类的名字和数据的名字是否一致，一致的话，再一次请求1级分类的接口，将请求的数据id传给后端作比较，然后就能获取二级分类的数据了
2.2.2.3 上传图片，我们在写上传图片的时候可以使用element-ui的上传图片组件
这是代码
<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>
这是功能实现
//这是上传图片的
handlePreview(file) {
console.log(file);
this.form.subImages = file.response.data.uri; //这个是获取那个图片的路径
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
//上面两个在添加中用不到，只用这个上传成功的方法
success(response, file, fileList) {
console.log(response); //response 这个参数是方法自带的，不用传 代表的是添加的图片信息，是个对象
this.form.subImages = response.data.uri; //这个是获取那个图片的路径
},
2.2.2.4 富文本的实现
<quill-editor
v-model="form.detail"
@change="editChange($event)"
style="height: 100px;width: 500px;margin-top: 10px"
>
</quill-editor>
2.2.3 查看功能的实现，在查看页面我们可以看到每条数据的详细数据，可以通过详情接口进下获取数据，要把列表页每一条id传到详情页 详情页接口 /api/product/detail.do get
2.2.4 编辑功能的实现 ，编辑功能其实和添加的功能类似，接口/api/product/save.do post
点击提交的时候的代码如下，可以将编辑后的数据添加到更新接口中，从而实现编辑效果的实现
onSubmit() {
//提交
updateProduct(this.detail).then(res => {
console.log(res);
this.$message({
message: res.data.data,
type: "success"
});
this.$router.push("/shop");
});
},
2.2.5。状态功能的实现
在filters里边定义两个函数，来操作上架下架的切换功能
types(val) {
return val == 1 ? "在售" : "已下架";
},
type2(val) {
return val == 2 ? "上架" : "下架";
}
然后在标签上绑定一个事件然后使用@click.prevent阻止默认事件
pending(val) {
// console.log(val.id, val.status);
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
updateStatus({
productId: val.id,
status: val.status == 1 ? 2 : 1
}).then(res => {
console.log(res.data);
shoplist(this.obj)
.then(res => {
console.log(res);
this.tableData = res.data.data.list;
this.total = res.data.data.total;
console.log(this.total);
})
.catch(err => {
return false;
});
});
this.$message({
type: "success",
message: "修改成功"
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消"
});
});
},
以上是商品管理页面的所有功能
957
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
