前端入门浅谈

Neper
395 阅读4分钟

0.为了前端培训做的一次博客

讲解目录

  1. web系统架构的演变————从传统架构到前后端分离
  2. 说说vue的开发流程
  3. 如何选择和使用UI库等各种插件
  4. 前后端登录鉴权机制
  5. 如何调试前端代码
  6. 浅析vue，更进一步了解
  7. 浏览器地址栏中输入url干了哪些事
  8. 一些工具

1. web系统架构的演变————从传统架构到前后端分离

1.1 传统架构MVC

  • M: model 模型 （数据库）
  • V: View 视图 （前端页面）
  • C: Controller 控制器 （处理业务逻辑）

请求返回的最终结果是html WEB系统前后端架构模型

1.2 前后端分离

SPA

SPA 全称 Single Page Application（单页面应用），使用前端路由的方式代替后端的 controller，并使用前端模板代替后端的模板引擎渲染，使用接口实现与后端的数据交互。

SPA 的优势：

  1. 环境：前端开发者不需要本地起后端环境
  2. 流程：独立的前端开发方式，由于后端返回纯 JSON ，前端想要模拟请求响应的话，只需启动一个纯静态的服务器，响应 JSON 格式的 html 即可
  3. 联调：清晰的对接方式，JSON 对于前后端来说都是比较纯粹的
  4. 效益：对于用户来说，用户体验的提升

SPA 的劣势

  1. SEO 弱
  2. 首屏加载慢，等所有 js 加载完才能出首屏
  3. 前端需要处理一些本不需要在这一层处理的事情，如权限控制交给前端控制

参考

实践中的前后端分离 - 掘金 (juejin.cn)

2. 说说vue的开发流程

创建

  1. 介绍 | Vue CLI (vuejs.org) 
    # 安装
npm install -g @vue/cli
# 创建项目
vue create hello-world
  2. 开始 | Vite 官方中文文档 (vitejs.dev) 
    npm init vite@latest
  3. 找一些优秀开源已经做了一些基础修改，便于二次开发的模板（后台管理系统，移动端系统）

一些vue中开发的问题

问题一

前后端是同步进行的，但是接口不一定先比你提供，当自己写完静态页面的一些逻辑时，需要数据填充，有的是直接写死变量，但是这样少了请求的过程，而且后续联调改动大，所以需要mock。

解决

  • 自己起一个服务，写一些简单的静态逻辑
  • 一些插件
  • 推荐 Fast Mock，方便调试

问题二

等到后端接口写好了，后端人员会给你提供一个接口地址，我们按照接口地址去调数据，发现被出错了（实际上是被拦截了） -> 同源策略

同源要求

  • 域名
  • 协议
  • 端口

同源内容

  • 存储
  • ajax请求
  • DOM

解决

九种跨域方式实现原理（完整版） - 掘金 (juejin.cn) dev-server配置代理（转发请求）

  server: {
	port: 2800, //挂载端口
	proxy: {
            '/api': {	
                    target:'https://www.fastmock.site/mock/18f94db5174920c0ad6a1e455bd1a1ca/scui-demo/api',
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/api/, '/')
		}
	}
  },

问题三

js的异步问题(promise)

问题四

vue数据流自定向下

问题五

vue import是引用值，修改会引起多模块变化

解决

深拷贝 JSON.parse(JSON.stringify(str))

问题N。。。。结尾提问回答

3. 如何选择和使用UI库等各种插件

UI库种类繁多，质量参差不齐，有些可能会有bug，如果没人维护一旦使用起来就很坑，所以就推荐几个，少而精

  1. npm i -s 库 （顺便讲一下-s -d）
  2. import
  3. Use 以element为例 安装
npm install element-plus --save

引入

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

4. 前后端登录鉴权机制

浏览器存储

  1. cookie: 4k 可以设置过期时间
  2. localStorage: 5M 自动手动释放
  3. sessionStorage: 5M 浏览器关闭清除
  4. indexDB: 大小无限制

参考

5. 如何调试前端代码

  1. dev-tools
  2. vue-devtools
  3. debugger

F12演示

6. 浅析vue，更进一步了解

  1. 响应式原理
  2. 双向绑定原理
  3. vue-router
  4. vuex
  5. 模块化
  • COMMONJS
  • CMD
  • AMD
  • UMD
  • ES6 export import
  1. vue生命周期

7. 浏览器地址栏中输入url干了哪些事

  1. url解析
  2. 浏览器缓存命中策略
  3. DNS解析
  4. HTTP连接
  5. 服务器响应返回
  6. 解析生DOM树，CSSOM树，生成布局树 Layout Tree，渲染（回流和重绘）
  7. HTTP断开连接

参考

8. 一些工具

  1. nvm: node版本管理器
  2. nrm: node源管理器
avatar
文章
阅读
粉丝