# WH2112 **Repository Path**: zuozhaoxi/wh2112 ## Basic Information - **Project Name**: WH2112 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 4 - **Forks**: 0 - **Created**: 2021-12-13 - **Last Updated**: 2022-08-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 时间安排 (9周) # Vue 12.18 # Vue进阶 12.25 # Vue项目 1.1 # Node+Vue3.0 + typescript 1.8 # React 1.15 # React 进阶 1.23 # 春节 # React 项目 2.12 # 小程序 2.19 # 就业周 2.26 # 数据驱动 # 基本数据类型 # 引用数据类型 对象和数组 # 2 3 # 6 # a.__proto__.prototype.call() instance of # jQuery = $ $.fn = $.prototype 区别 $.ajax $.get $("#box").html().show().hide().addClass() # $ 属于jQuery 静态对象 没有this # $.fn 属于jQuery 原型对象 有this 需要实例化 # 作息时间 # 8:20 - 8:50 背面试题 (迟到 20个俯卧撑 2次 20个+500字检讨 20个 + 1000字检讨 + 4次 下个班) # 9:00 - 10:30 # 10:40 - 12:10 # 1:50 - 3:50 # 4:10 - 6:10 # 7:00 - 10:00 (9:30) # 纪律 玩手机 看小说 看视频 打游戏 周六早退 (2000字检讨+ 扣50分 ) # GIT # 命令行 # Vue # 阅读文档 (API文档 接口文档 测试文档 开发文档) # 命令行 4. linux 指令 查看版本 node -v node --version window+r cmd 控制台 D: 直接切换到硬盘 D cd /d ls 显示当前文件夹得所有的文件目录 tab 自动补全 cd 切换到对应的文件目录 cd .. 切换到上一级文件 touch 创建文件 mkdir 创建文件夹 pwd 显示文件目录路径 rm -rf 不询问强制删除文件 cnpm i rimraf -g ctrl+c 强制退出 当前命令 上下箭头 读取之前的命令 vim vi 在线文本编辑 ESC :wq! : :"q!" :"wq!" mv libs vuedemo # Vue 基础教程 # git 指令 # git init 新建一个git仓库 # GIT # romte 远程主机仓库 # repostiory 本地仓库 # index 暂存区 # workspace 本地工作区 # git add ./ 添加代码到暂存区 # git commit -m "注释写清楚你的代码意义" 提交代码到本地仓库 # git push 推送代码到远程主机 # GIT pull 拉取代码到本地工作区 # git checkout "dev" 切换分支 # git fecth 拉取 拾取代码到本地仓库 # git status 查看文件状态 # git remote add origin https://gitee.com/zuozhaoxi/wh2110.git 把2个仓库链接一起 # git push origin master:master # git branch 查看分支 # git branch dev 创建分支 dev # git merge dev master 合并分支 # git checkout 切换分支 # git push origin dev:dev # dev:dev # master : master # git pull origin dev:master (远程dev分支拉取到本地的master) # git push origin dev:master (dev=> 本地的dev分支 master=>远程的master分支 ) # git log 查看提交日志 git config --global user.name "xxxxName" git config --global user.email "xxxxx" # 公司的仓库操作 1. 克隆 (用户名和密码 私有仓库地址 ) git clone https://gitee.com/zuozhaoxi/wh2112.git 2. 拉取远程主机仓库的代码到本地仓库 (多人协作开发 代码冲突 ) git pull origin master 3. 添加到暂存区 git add ./ 4. 添加到本地仓库 git commit -m "ds" 5. 推送到远程主机仓库 git push origin master:dev # GIT 远程主机 remote # GIT 本地创建 Index # 安装脚手架 # cnpm i @vue/cli -g # vue --version # vue create vueapp # 选择最后一个 手动选择 # cd vueapp # yarn serve # vue ui 可视化 # cnpm i rimraf -g # 反向安装 # rimraf node_modules # cnpm i # Vue 项目的目录 # node_modules 插件包的集合 # public 项目的共有的静态文件 # src 工作区 (assets) # assets 静态文件 # components 共有组件 # router 路由 # store vuex # views 视图 (路由组件 单文件组件) # App.vue 项目根组件 # main.js Vue 项目启动的主文件 # package.json npm的package 包的配置文件 # jsondata 模拟后台数据接口 (简单的增删改查) Vue2.0 数据位置 # cnpm i json-server -g # 启动 json-server data.json # Vue2.0 项目 # json-server + Vue + Vue-Router + Vuex + Vant # 开发手机端的App 项目 # guide 引流页面 # errorpage 404 503 # 首页 电影 影院 商城 我的 # 登录 注册 找回密码 修改密码 # 电商 购物车 点赞 收藏 优惠劵 地址 联系人 订单管理 商品评论 # 路由配置 (路由挂载传参数 ) # 移动端适配 (rem) # 移动端适配 等比缩放 rem (当前页面的 根节点html 的字体大小 ) # px vw vh em rem pt # 手机端 尺寸 750px # 根据手机的宽度和设计稿宽度 求出对应的rem 进行等比缩放 # 设计稿宽度 : 手机的宽度 = 设计稿的对应Rem : 手机对应的 rem # 750px : 100vw = 100px : ? # ?rem = 100vw/7.5 当前设备对应的rem (网易适配) # 网易适配 # 假设 750px 宽的 设备下 对应的 rem = 100px # 假设 750px 设计稿 宽度 为 200px 的div 200px ==> 2rem # 750px : 100vw = 100px : ? ==> x 100vw * 100 / 750 = 100vw/7.5 # 100vw/7.5 每一个手机对应的 rem # 淘宝适配 (rem = 设备宽度的 10/1) # 1. 把屏幕平分成100等分, 设定1rem = 10等分 1rem = 10vw; # 2. 根据 dpr 来 把 viewport 放大 做到物尽其用的适配 meta # dpr 单位面积物理像素的密度比例 # 物理像素 手机设备最小的物理晶体导管 pt # border 1px 的优化 0.5px # 安装 mongoDB # 安装包 # C:\MongoDB # C:\MongoDB\data # C:\MongoDB\log # 配置系统环境变量 # mongo # 查看服务 # 服务 or services.msc # MongoDB Server 无法启动 需要删除 # cmd 管理员 SC delete MongoDB Server # 关闭服务 然后再次打开 看不到 MongoDB Server 了 测试是否删除服务成功 # 1 C:\MongoDB\log 新建一个 mongo.log # 2 C:\MongoDB 新建一个文件 mongo.config # 3 在 mongo.config 写入 dbpath=C:\MongoDB\data logpath=C:\MongoDB\log\mongo.log # 4 测试 mongod --config C:\MongoDB\mongo.config (关闭所有的CMD 新开一个CMD) 测试成功关闭所有的CMD # 5 安装服务 mongod --config C:\MongoDB\mongo.config --install --serviceName "MongoDB" (CMD必须管理员) # 6 再次查看服务 MongoDB # 7 右键启动服务 管理员CMD net start MongoDB # 8 如果需要关闭 管理员CMD net stop MongoDB # express 安装 express cnpm i express -g 全局安装 cnpm i express-generator -g 安装全局的高版本 cnpm i koa-generator -g express -h express --version express -e express1706 (生成ejs 模板引擎 的工程) express exp (生成 jade 默认生成jade 模板 ) express -e myserver cd myserver cnpm i npm start # express express 对象 app app.get 获取变量 app.set 设置全局的变量 指向任何值 app.post app.all 所有的请求都包含 app.use 使用注册全局的函数 (中间件) 中间件 middleware 本质就是一个高度封装的函数 有一定的业务逻辑的 后面的中间件可以使用前面的中间件的功能 注意顺序 https://www.aliyun.com/minisite/goods?taskPkg=1212cpz&pkgSid=182465&userCode=saht5k94 # screen # 后台永久挂起服务 # https://www.cnblogs.com/webnote/p/5749675.html # yum install screen screen -S yourname -> 新建一个叫yourname的session screen -ls -> 列出当前所有的session screen -r yourname -> 回到yourname这个session screen -d yourname -> 远程detach某个session screen -d -r yourname -> 结束当前session并回到yourname这个session # socket (套接字) # 网络通讯 # 网络上的两个程序通过一个双向的通信连接实现数据的交换，这个连接的一端称为一个socket # 服务端socket # 1. 创建socket # 2. 启动socket 监听端口和主机 # 3. 接受来自客户端的链接请求 # 4. 发送数据到客户端 # 5. 监听客户端的关闭 # 客户端socket # 1. 创建客户端socket # 2. 链接服务端的socket # 3. 发送消息到服务器端 # 4. 接受来自服务器的socket # 5. 监听服务器socket 的关闭 和 异常 # 两端的socket 相互监听 相互依赖 (长链接) # 即时通讯 (聊天室 网站竞拍 斗地主) # Vue 3.0 项目 (React项目) # Vue3.0 + ElementUI(antd-design-vue) + Node + Express + MongoDB # 前端后端全部独立完成 (全栈开发) # 千锋社区管理系统 # 错误页面 # Guide # 登录注册板块 # 主页 # 用户管理 (学员1 班主任2 讲师3 校长4 董事长5 超管6 ) # 权限管理 # 意见管理 # 公告管理 # 学员管理 # 生活管理 # 考勤管理 # 成绩管理 # 班级管理 # 水费管理 # 面试管理 # 前端后端分离开发模式 # Vue项目 端口8888 # Node项目 端口4800 # 前后端分离的优点 # 前端和后端各自独立开发 互补干扰 提高开发效率 优化各自的技术 # 缺点 # 跨域 降低各自沟通效率 不能做比较高级的服务器端渲染 SSR(SSG) # nuxt.js # https://nuxtjs.org/ # Vue + express 框架 (前后端不分离) # npx create-nuxt-app <项目名> # 自定义脚手架 # react 有几层境界 # 1 纯 react UI + API # 2 redux # 3 react-redux + d # 4 mobx + immutable # 5 hooks (纯函数写代码) # 6 hooks + mobx + react-redux + immutable # 7 hooks + mobx + react-redux + immutable + typscript + dva + umi # 8 升天... # 安装react 脚手架 cnpm i typescript -g 安装脚手架 # create-react-app cnpm i create-react-app -g create-react-app --version create-react-app react-app 安装项目 npx create-react-app@4.0.3 react-app cd react-app npm start 启动项目 http://localhost:3000/ npx create-react-app my-app --template typescript npx create-react-app react-app create-react-app my-app --template typescript # dva (https://dvajs.com/guide/getting-started.html) cnpm install dva-cli -g dva -v dva new dva-app cd dva-app npm start http://localhost:8000/ # umi (https://umijs.org/zh-CN/docs/getting-started) mkdir umiapp cd umiapp npx @umijs/create-umi-app cnpm i 反向安装 npm start # React 项目 # 技术栈 (React react-router-dom@6 mobx HOOKS Typescript Antd) # Form 表单的方法 getFieldError: ƒ (name) getFieldInstance: ƒ getFieldInstance(name) getFieldValue: ƒ (name) getFieldWarning: ƒ (name) getFieldsError: ƒ (nameList) getFieldsValue: ƒ (nameList, filterFunc) getInternalHooks: ƒ (key) isFieldTouched: ƒ (name) isFieldValidating: ƒ (name) isFieldsTouched: ƒ () isFieldsValidating: ƒ (nameList) resetFields: ƒ (nameList) scrollToField: ƒ scrollToField(name) setFields: ƒ (fields) setFieldsValue: ƒ (store) submit: ƒ () validateFields: ƒ (nameList, options) # WH2112 寒假作业 # 完成React 项目 (2+6 个版块) # 完成Vue3.0 项目 (2+4 个版块) # 准备个本子 笔 至少抄 160道面试题 (每天10题) # 最后上线 # 上线后端 # myserver # www connect.js 不能出现localhost # 安装MongoDB mongodb 新的安装方法 步骤 1. http://www.cnblogs.com/maybo/archive/2016/02/04/5182272.html 2. 新建 ruanjian 文件夹 3. 切换到 ruanjian 4. 使用:wget下载数据库　得到：mongodb-linux-x86_64-3.2.1.tgz　安装包 wget -c https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.2.1.tgz 5. tar－zxvf 解压压缩包 tar -zxvf mongodb-linux-x86_64-3.2.1.tgz 6. 移动 解压文件 mv mongodb-linux-x86_64-3.2.1 /usr/local/mongodb 7. 切换到 /usr/local/mongodb 8. ls 查看 然后新建 data 存放数据库 logs/mongo.log 存放日志文件 mkdir data mkdir logs cd logs touch mongo.log 9. 配置 mongo 的环境变量 在任何地方都可以输入 mongo 从而进去 mongo 修改/etc/profile, 添加如下内容 vim /etc/profile export PATH=/usr/local/mongodb/bin:$PATH 　　保存后执行如下命令： 　　vim /etc/profile 　　source /etc/profile 10. 启动 切换到 /usr/local/mongodb/bin (没有必要 因为配置全局环境变量) 注意启动的时候 路径之间不能给空格 mongod --dbpath=/usr/local/mongodb/data --logpath=/usr/local/mongodb/logs/mongo.log --auth --logappend -port=27017 --fork (不需要 需要密码) mongod --dbpath=/usr/local/mongodb/data --logpath=/usr/local/mongodb/logs/mongo.log --logappend --port=27017 --fork 11. 在 /usr/local/mongodb/bin (环境变量配置就不需要) mongo 进入 mongo shell 12. 公网链接 mongo 公网IP 13. 设置密码 0. 设置密码登录 mongod --dbpath=/usr/local/mongodb/data --logpath=/usr/local/mongodb/logs/mongo.log --auth --logappend --port=27017 --fork 14. mongodb 设置密码 1. use admin 2. db.createUser({user: 'root', pwd: 'abc123', roles: ['root']}) 3. db.auth('root', 'abc123') // 1 成功 2. 失败 4. use wh2105 5. db.createUser({user:'zuozuomu',pwd:'missyou',roles: [{role:'readWrite',db:'wh2105'}]}) 6. db.auth('zuozuomu','missyou') # 迁移数据库 一键迁移 # mongodb 版本 # cnpm i mongoose@4 -S # cnpm i mongodb@4 -S # 安装nginx 4.0 nginx 静态服务器部署 nginx 静态服务器 安装步骤 环境配置 yum install gcc-c++ yum install -y pcre pcre-devel yum install -y zlib zlib-devel yum install -y openssl openssl-devel 0. mkdir ruanjian 1. cd ruanjian 2. wget -c https://nginx.org/download/nginx-1.10.1.tar.gz 3. tar -zxvf nginx-1.10.1.tar.gz 4. cd nginx-1.10.1 5. ./configure 写入安装配置 ./configure --with-http_ssl_module 选择 6. make 预安装 7. make install 8. whereis nginx 查看 nginx 安装路径 /usr/local/nginx 9. 配置环境变量 vim /etc/profile export PATH=/usr/local/nginx/sbin:$PATH source /etc/profile 10. 启动 nginx 查看进程 ps aux|grep nginx ps -ef | grep nginx kill -9 nginx netstat -ntlp | grep :80 11. nginx -s reload 12 打开nginx服务器地址 http://47.94.226.226:80 13./usr/local/nginx/html nginx 静态服务器目录 以后所有的文件放置这里 # 部署前端项目 (React Vue2.0 Vue3.0) 1. 把项目里面所有的 localhost 替换成 公网IP 1. react 项目 package.json homepage "homepage": "./", 2. router 设置成 mode:hash 3. Vue 项目 设置 打包相对路径 publicPath:"", 4. 测试文案 全部去掉 去掉所有的console.log 5. 打包 npm run build 6. 本地测试 7. 线上测试 8. 正式发布 # 后台永久挂起 screen # pm2 # cnpm i pm2 -g pm2 start bin/www 启动服务 后台永久挂起 就是看不到 error pm2 list 查看服务列表 pm2 show 0 查看当前服务 pm2 stop 0 停止当前 服务器 0 pm2 restart 0 重启当前服务 0 pm2 delete 0 删除当前服务 0 # nginx 配置反向代理 # cd /usr/local/nginx/conf # vim nginx.conf location /gateway{ proxy_pass https://m.maizuo.com/; } location /mobile{ proxy_pass https://www.welan.com/; } location /roce/ { proxy_pass https://www.welan.com/; } location /api/ { proxy_pass http://101.132.156.101:2112/; } location /yun/ { proxy_pass http://47.104.209.44:3333/; } # nginx -s reload # 小程序APPID wx0af05cfd7ea02007 # 引入 uview-ui 1. @import "uview-ui/index.scss"; 2. @import 'uview-ui/theme.scss'; 3. //引入uview import uView from "uview-ui"; Vue.use(uView); 4. "easycom": { "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" },