第四章:项目基础架构
此章节全力讲解前端基本项目架构,通过此章节可搭建一个通用性的前端架构,内容涵盖跨域方案、路由封装、错误拦截等。
一、前端跨域解决
什么是前端跨域?
- 跨域是浏览器为了安全而做出的限制策略
- 浏览器请求必须遵循同源策略:
同域名
、同端口
、同协议
怎么解决前端跨域?
CORS跨域
CORS跨域 - 服务端设置,前端直接调用
说明:后台允许前端某个站点进行访问。如Easy Mock:开源的公共MOCK平台,公共接口。
控制台查看network信息
响应头中:
Access-Control-Allow-Credentials
:允许前端将cookie带过去Access-Control-Allow-Origin
:表示允许指定的这个网址访问mock的接口
JSONP跨域
前端适配,后台配合
说明:需要前后端同时改造
安装jsonp
安装并添加到环境中
npm i jsonp --save-dev
jsonp不是请求在network中的XHR里面没有,JS里面有,是js的一段脚本。
jsonp与cors的区别:
let url2 = 'https://order.imooc.com/pay/cartorder'
axios.get(url2).then((data)=>{
console.log(data)
})
jsonp(url2,{
},(err,res)=>{
console.log(res)
})
当使用axios时控制台输出信息,表示不是允许的网站,无Access-Control-Allow-Origin请求头。
当使用jsonp时,能正常访问。
代理跨域
实现:通过修改nginx服务器配置来实现;
说明:前端修改,后台不动;
具体操作:
1.在整个项目项目中新增vue.config.js的配置文件
2.文件中写入:
// 开发环境下的接口代理 访问/a代理到/b,则实际访问的/b
// webpack的配置表传送给nodejs服务器
// nodejs遵循commonjs规范抛出就不用import了
module.exports = {
// 自动加载devServer中的配置表
devServer:{
host:'localhost',
port:8080,
// 代理
proxy:{
// 访问/pay时实现拦截转发到target中
'/api':{
// 目标网址,内部访问到慕课网的接口
target:'https://order.imooc.com',
changeOrigin:true,
pathRewrite:{
'/api':''
}
}
}
}
}
实现原理:
书写好config.js后重启项目,vue会自动加载此配置文件下的devServer配置表
针对proxy中做路由统一拦截(此处是统一拦截的/api),在.vue文件中定义url时都统一定义为如下:let url2 = ‘/api/pay/cartorder’,在拦截后进行访问目标地址时由**changeOrigin:true,pathRewrite:{’/api’:’ '}**自动去掉/api进行访问。
此时看似访问的localhost:8080/api/pay/cartorder实则访问的https://order.imooc.com/pay/cartorder
二、项目准备
需求梳理
- 熟悉文档、查看原型、读懂需求
- 了解前端设计稿 - 设计前端业务架构
- 了解后台接口文档 - 制定相关对接规范
- 协调资源
- 搭建前端架构
分析目录
- 查看原型图,分析哪些板块会封装为一个组件,进行复用。
- 综合分析后先搭建大的目录再去创建小的。
- 静态图片建议src下的assets放小的,public下放大的。
- src下的components就是组件
构建项目目录
-
初始化VScode内容:删除components文件夹下的最初的HelloWord组件,以及删除App.vue下对HelloWord组件的所有引用,并增加router-view的入口。
-
在src目录下新建api文件夹统一管理路由api
-
src下创建util文件夹存放公共方法,如格式化,数组转换之类的方法等。
-
src下创建storage文件夹存放对数据存值取值等的工具箱。
-
src下创建store文件夹存放vuex的内容。
-
src下创建router.js存放路由
-
src下创建pages文件夹存放页面文件
-
pages创建index.vue(首页)、home.vue(主结构、存放公共的头部和尾部),product.vue(产品栈)、detail.vue(商品详情)、orderList.vue(订单页)、order.vue(订单主结构)、orderConfirm.vue(订单确认)、cart.vue(购物车)、login.vue(登录)、orderPay.vue(支付)、alipay.vue(支付跳转中间页)
-
components下创建NavHeader.vue公共头部NavFooter公共底部。
安装依赖
懒加载:vue-lazyload
ui库:element-ui
sass编译:node-sass sass-loader
轮播:vue-awesome-swiper
axios:vue-axios
cookie:vue-cookie
npm i vue-lazyload element-ui node-sass sass-loader vue-awesome-swiper vue-axios vue-cookie --save-dev
文章来源:https://www.toymoban.com/news/detail-496487.html
路由封装
由页面划分路由,找共性,拆分父子组件。
在router.js中封装所有的路由,并重定向到index文章来源地址https://www.toymoban.com/news/detail-496487.html
import Vue from 'vue'
import router from 'vue-router'
import Home from './pages/home.vue'
import Index from './pages/index.vue'
import Product from './pages/product.vue'
import Detail from './pages/detail.vue'
import Cart from './pages/cart.vue'
import Order from './pages/order.vue'
import OrderList from './pages/orderList.vue'
import OrderConfirm from './pages/orderConfirm.vue'
import OrderPay from './pages/orderPay.vue'
import AliPay from './pages/alipay.vue'
Vue.use(router);
export default new router({
routes:[
{
path:'/'
到了这里,关于【Vue全家桶高仿小米商城】——(四)项目基础架构的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!