目录

• 前言：
• 项目效果展示
• 引入插件说明
• 后台请求代码编写
• package.json页面代码
• main.js页面代码
• 总结

前言：

经过大概一周时间的兴勤劳作，美食杰项目的所有代码已经全部编写完成，功能已全部完善，这一章给当前项目做一个总结。这一次项目使用了 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都加上tokenconfig.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')

总结

以上就是 美食杰项目的总结和剩余的一些小功能，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog