前言：
经过大概一周时间的兴勤劳作，美食杰项目的所有代码已经全部编写完成，功能已全部完善，这一章给当前项目做一个总结。这一次项目使用了 element-ui 框架来完成静态功能的实现。感谢大家这一直以来对我的支持。
当前项目其他的页面代码可以在当前专栏中找到
项目效果展示
美食杰项目所有功能效果展示
引入插件说明
点击跳转至节流的官方文档：https://www.npmjs.com/package/throttle-debounce
点击跳转至 element-ui 官方文档：https://element.eleme.cn/#/zh-CN/component/installation
点击跳转至 axios请求 官方文档：https://www.npmjs.com/package/axios
后台请求代码编写
import axios from 'axios'; class HttpRequest { constructor(options){ this.defaults = { baseUrl: '' } this.defaults = Object.assign(this.defaults, options); } setConfig(){ } interceptors(install){ install.interceptors.request.use( config => { let token = localStorage.getItem('token'); if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token config.headers.authorization = `token ${token}`; } return config; }, err => { return Promise.reject(err); } ); install.interceptors.response.use( res => { const { data, status } = res; return data; }, err => { return Promise.reject(err); } ); } request(options){ options = Object.assign(this.defaults, options) const instance = axios.create(options) this.interceptors(instance); return instance } } const request = new HttpRequest({ baseURL: '/api' }); const http = request.request(); // 获取banner数据 export async function getBanner(){ // console.log(await http.get('/banner')); return await http.get('/banner'); } // 获取所有属性分类 export async function getProperty(){ return await http.get('/menu/property'); } // 获取所有菜谱分类 export async function getClassify(){ return await http.get('/menu/classify'); } /** * 发布菜谱 * @export * @param {Object} params - 需要上传的数据，参考backData * @returns */ export async function publish(params){ return await http.post('/menu/publish', params); } /** * 注册账号 * @export * @param {Object} params - * @param {Object} params.name - 用户名 * @param {Object} params.password - 密码 * @returns */ export async function register(params){ return await http.post('/user/create', params); } /** * 账号登录 * @export * @param {Object} params - * @param {string} params.name - 用户名 * @param {string} params.password - 密码 * @returns */ export async function login(params){ return await http.post('/user/login', params); } // class : 类里面封装了axios请求相同的部分 // http = 实例化对象.请求 // function(){ // http.get // } // http.post /** * 账号登出 */ export async function login_out(){ return await http.post('/user/login_out'); } /** * 获取用户信息 * @export * @param {Object} params - * @param {string} [params.userId] - 用户id * @returns */ export async function userInfo(params){ return await http.post('/user/info', params); } /** * 拿到用户发布的菜谱，可做筛使用选 * @export * @param {Object} [params] - 不填写，则获取所有的菜谱 * @param {string} [params.userId] - 指定用户的菜单 * @param {string} [params.classify] - 按照菜单分类，进行筛选 * @param {string} [params.property] - 指定菜单属性进行筛选 * @param {string} [params.property.craft] - 按工艺筛选 * @param {string} [params.property.flavor] - 按口味筛选 * @param {string} [params.property.hard] - 按难度筛选 * @param {string} [params.property.people] - 按人数筛选 * @param {string} [params.page] - 指定页码 * @returns */ export async function getMenus(params){ return await http.get('/menu/query', {params}); } /** * 根据菜单id，拿到菜谱的详细信息 * @export * @param {Object} [params] - * @param {string} [params.menuId] - 指定菜单的id * @returns */ export async function menuInfo(params){ return await http.get('/menu/menuInfo', {params}); } /** * toggle 收藏。收藏的取消收藏；没收藏的，要收藏。 * @export * @param {Object} [params] - * @param {string} [params.menuId] - 指定要收藏的菜单的id * @returns */ export async function toggleCollection(params){ return await http.post('/user/collection', params); } /** * toggle 关注。关注的取消关注；没关注的，要关注。 * @export * @param {Object} [params] - * @param {string} [params.followUserId] - 指定要关注的用户的id * @returns */ export async function toggleFollowing(params){ return await http.post('/user/following', params); } /** * 获取指定用户的收藏的菜单 * @export * @param {Object} [params] - * @param {string} [params.userId] - 指定的用户id * @returns */ export async function collection(params){ return await http.get('/user/collection', {params}); } /** * 获取指定用户关注的人 * @export * @param {Object} [params] - * @param {string} [params.userId] - 指定的用户id * @returns */ export async function following(params){ return await http.get('/user/following', {params}); } /** * 获取指定用户的粉丝 * @export * @param {Object} [params] - * @param {string} [params.userId] - 指定的用户id * @returns */ export async function fans(params){ return await http.get('/user/fans', {params}); } /** * 上传图片 * @export * @param {Object} [params] - * @param {string} [params.type] - product user step * @returns */ export async function upload(params){ return await http.post('/upload', {params}); } /** * 修改用户信息 * @export * @param {Object} [params] - * @param {string} [params.name] - product user step * @param {string} [params.avatar] - product user step * @param {string} [params.sign] - product user step * @returns */ export async function userEdit(params){ return await http.post('/user/edit', params); } /** * 获取菜谱评论信息 * @export * @param {Object} [params] - * @param {string} [params.menuId] - 指定菜谱的id * @returns */ export async function getComments(params){ return await http.get('/menu/comment', {params}); } /** * 提交菜谱评论信息 * @export * @param {Object} [params] - * @param {string} [params.menuId] - 指定评论的菜谱id * @param {string} [params.commentText] - 评论内容 * @returns */ export async function postComment(params){ return await http.post('/menu/comment', params); }
package.json页面代码
{ "name": "meishijie-vue", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" }, "dependencies": { "axios": "^1.1.3", "core-js": "^3.8.3", "element-ui": "^2.15.10", "stylus": "^0.59.0", "throttle-debounce": "^5.0.0", "vue": "^2.6.14", "vue-router": "^3.5.1", "vuex": "^3.6.2" }, "devDependencies": { "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-vuex": "~5.0.0", "@vue/cli-service": "~5.0.0", "sass": "^1.32.7", "sass-loader": "^12.0.0", "stylus": "^0.59.0", "stylus-loader": "^7.1.0", "vue-template-compiler": "^2.6.14" } }
main.js页面代码
`import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import axios from 'axios' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.config.productionTip = false Vue.prototype.$axios = axios Vue.use(ElementUI); new Vue({ router, store, render: h => h(App) }).$mount('#app')
总结
以上就是 美食杰项目的总结和剩余的一些小功能，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
