手把手教完整的前后端的开发---1

2022-07-07 14:36:54 阅读：234 来源： 互联网

前台：面向用户使用的页面
后台：面向管理人员使用的页面
前端：页面使用的是什么技术 html css
后端：急啊擦主导的技术

后端给前端提供接口获取数据

1.项目背景：常见的电商模式： B2B , B2C, C2B , C2C , O2O
B2B模式：是指商家与商家建立的商业关系，如阿里巴巴；
B2C模式：是指商家直接把商品卖给用户（个人），即“商对客”模式，也就是场所的商业零售，直接面向消费者销售产品和服务，如苏宁易购，京东，天猫；
C2B模式：是指消费者对企业，现有的消费者需求产生而后有企业生产
C2C模式：是指客户销售给客户，如咸鱼，淘宝
O2O模式: 线上销售，线下服务：如：饿了么，淘票票
2.图灵商城架构图
2.1 前后端分离基础版
微服务形成之前的架构形态
前后端分离，基于vue的后台管理系统

sku：规格参数
spu：属性
为什么要使用前后端分离架构：
为了后续能够平顺、无障碍进去高级架构师中《微服务三高》架构版
企业中当开发一个新的项目时不会一上来就考虑三高、微服务、等特性，一般为了规避成本风险，会使用开发成本较低，但是后续扩展好改造的架构。

2022.6.22
1.基本的设计模式： MVC模式---modal数据保存 + 试图view用户界面 + 控制器control 逻辑层
通信方式（无用户交互）单向通信： view-> control-> model -> view
MVP模式---- ：view <->presenter(逻辑处理）（把view和model进行了分离，并且改变了通信的方向）<->model(数据处理）
MVVM模式--- ：view <-> viewIModel(逻辑处理）（可以实现自动跟新，viewmodel实现了观察者的模式） <-> Model
2.SPA 和MPA

SPA(单页面应用)：只有一个主页面的应用，一开始只加载一次js、css等相关资源，所有的内容都包含在主页面，对每个功能进行模块化，对ui组件进行组件化，单页面应用跳转就是切换相关组件，仅刷新局部资源。
MPA(多页面应用)：有多个独立主页面应用，每个页面都必须重复加载js、css等相关资源，多页面应用跳转页面，需要整页刷新资源。

3.开发流程

墨刀软件设计原型图 ---》 ui优化美化设计符合需求的ui图（蓝湖）--》实现还原设计稿 + 写功能实现需求 + 对接接口 +项目优化 +安全 --》后端写接口+实现需求 --》测试、运维打包发布测试+先自己载本地测试，然后测试发布测试版本，测问没有问题之后就会发布正式稳定版本，发布完正式版本，还要在正式环境中进行测试。

pc： vue + elementui react+ antd
移动端： vue+vant reactNative

4.项目搭建 vue2.0 脚手架vue-cli vue-cli 2.0（安装 npm i -g vue ；npm i -g vue-cli； npm i -g webpack; 检查版本，是否安装成功；新建项目 vue init webpack projectName；如果是从vue-cli3。0+ 到vue-cli 2 需卸载 3.0 版本 npm uni -g @vue/cli，后在做以上操作） vue-cli 3.0+（安装 npm i
-g
@vue.cli; 检查版本： vue -V 或 vue --version；创建项目vue create vuecli4 ；使用vue项目管理器，通过 ui操作 vue ui 可以打开可视化界面对项目进行配置；果是从vue-cli 2+ 到vue-cli 3.0+ 需卸载 2.0 版本 npm uni -g vue-cli，后在做以上操作）

      vue3.0

5.让项目运行时自动在浏览器打开： config文件夹中的index.js 文件，设置autoOpenBrowser: true即可；
去除地址中的“#”---》设置为history 模式：直接在router文件夹中的index文件中设置： model： history；

在项目项目中使用elementui
全局：安装 npm i element-ui -S ；在main.js 中加入

import ElementUI from 'element-ui'
// 引入css样式
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

按需:

7.在项目中使用css预处理器scss
官网：https://www.sass,hk/
安装 npm i sass-loader node-sass -S
使用vue文件中的style标签里加上lang = ‘scss’ 语法，如果做完以上操作去跑项目的时候出现问题报错，那么有可能是依赖包版本的问题，此时曲看package.json文件中改一下对应的版本

标签：npm,vue,cli,手把手,端的,模式,---,ui,页面
来源： https://www.cnblogs.com/baozhengrui/p/16397868.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

手把手教完整的前后端的开发---1