硅谷外卖项目介绍
前后端分离的SPA应用，前台采用vue全家桶制作webapp，后台使用nodejs,mongoDB开发，后台是直接拿过来用的，我是做前端的，所以只学习前端这一块
项目地址
https://github.com/ynzy/gShop
前台技术选型
vue,vue-router,axios
vant,swiper,mint-ui
stylus
1、搭建项目结构
- 静态资源导入
- --static--css--reset.css，在index.html页面引入即可
- 引入阿里图标库，在阿里图标库设计好自己需要用到的图标，生成在线代码直接在index.html引入
- 解决点击响应延时 0.3s 问题
2、vue-router的理解和使用
- router-view/router-link/keep-alive
- $router: 路由对象，包含一些操作路由的功能函数，来实现编程式导航(路由跳转)
- $route： 当前路由对象，一些当前路由信息数据容器，path/meta/query/params
- 路由拆分
- 拆分路由，当拿到ui图或者静态页面时，要对路由进行布局拆分，知晓，每个页面跳转到哪里，会显示什么
- 底部导航组件：FooterGuide
- 此导航路由组件： Msite/Search/Order/Profile
- 路由结构：
routes: [
{
path: '/',
redirect: '/msite'
},
{
path: '/msite',
name: 'msite',
component: Msite,
meta: { //配置元数据确定是否显示footer
showFooter: true
}
},
{
path: '/order',
name: 'order',
component: Order,
meta: {
showFooter: true
}
},
{
path: '/profile',
name: 'profile',
component: Profile,
meta: {
showFooter: true
}
},
{
path: '/search',
name: 'search',
component: Search,
meta: {
showFooter: true
}
},
{
path: '/login',
name: 'login',
component: Login
},
]
外卖
搜索
订单
我的
- 使用vant的Tabbar组件实现底部导航，由于点击跳转页面，再次刷新页面时，路由页面与底部导航激活的部分不匹配，所以在每次加载页面时，监听当前路由，使底部激活部分与之匹配
- 抽取组件
有些组件在很多页面都是一样的，只是显示的数据不一样，所有将其抽取出来放在--components公共组件中，通过solt插槽来实现组件通信标签结构，props获取父组件数据，实现多页面公用一个组件
- 头部组件: HeaderTop, 通过slot来实现组件通信标签结构
- 商家列表组件: ShopList
- 示例
//HeaderTop公共组件
//Msite父组件
登录|注册
- 登录路由组件
只有路由导航的四个页面需要显示底部菜单，登录组件是不需要显示底部导航的，所以，通过路由的meta属性，配置点击的路由组件显示为true
- 在app页面进行设置
6. 后台项目
启动后台项目: 理解前后台分离
测试后台接口: 使用postman
修正接口文档
7、前后台交互
- ajax请求：axios
- ajax请求封装： axios + promise
/**
* ajax请求函数模块
* 返回值： promise对象(异步返回的数据是: response.data)
*/
import axios from 'axios'
/**
* @export
* @param {*} url //请求地址
* @param {*} [data={}] //请求数据对象
* @param {string} [type='GET'] //请求方法
*/
export default function ajax(url, data = {}, type = 'GET') {
return new Promise(function (resolve, reject) {
// 执行异步ajax请求
let promise
if (type === 'GET') {
// 准备url query参数数据
let dataStr = '' //数据拼接字符串
Object.keys(data).forEach(key => {
dataStr += key + '=' + data[key] + '&'
})
if (dataStr !== '') {
dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
url = url + '?' + dataStr
}
// 发送get请求
promise = axios.get(url)
} else {
// 发送post请求
promise = axios.post(url, data)
}
promise.then(function (response) {
// 成功了调用resolve()
resolve(response.data)
}).catch(function (error) {
//失败了调用reject()
reject(error)
})
})
}
- 接口请求函数封装: 每个后台接口
/**
* 包含n个接口请求函数的模块
* 函数的返回值: promise对象
*/
import ajax from './ajax'
const BASE_URL = 'http://localhost:4000'
// const BASE_URL = '/api'
// 1、根据经纬度获取位置详情
export const reqAddress = function (geohash) {
ajax(`${BASE_URL}/position/${geohash}`)
}
// 2、获取食品分类列表
export const reqFoodCategorys = () => ajax(BASE_URL+'/index_category')
// 3、根据经纬度获取商铺列表
export const reqShops = (latitude,longitude) => ajax(BASE_URL+'/shops', {longitude, latitude})
// 4、根据经纬度和关键字搜索商铺列表
export const reqSearchShop = (geohash,keyword) => ajax(BASE_URL+'/shops', {geohash, keyword})
// 5、获取一次性验证码
export const reqCaptcha = () => ajax(BASE_URL+'/captcha')
// 6、用户名密码登陆
export const reqPwdLogin = ({name,pwd,captcha}) => ajax(BASE_URL+'/login_pwd',{name,pwd,captcha},'POST')
// 7、发送短信验证码
export const reqSendCode = (phone) => ajax(BASE_URL + '/sendcode', {phone})
// 8、手机号验证码登陆
export const reqSmsLogin = (phone,code) => ajax(BASE_URL + '/login_sms', {phone,code},'POST')
// 9、根据会话获取用户信息
export const reqUserInfo = () => ajax(BASE_URL + '/userinfo')
// 10、用户登出
export const reqLogout = () => ajax(BASE_URL + '/logout')
/**
* 获取商家信息
*/
export const reqShopInfo = () => ajax('/info')
/**
* 获取商家评价数组
*/
export const reqShopRatings = () => ajax('/ratings')
/**
* 获取商家商品数组
*/
export const reqShopGoods = () => ajax('/goods')
- 调用
mounted () {
const result = reqFoodCategorys()
// console.log(result)
result.then(function(res) {
console.log(res)
})
}