实战:Vue全家桶+SSR+Koa2实现美团网
目录
- 项目演示地址 [高仿美团网](http://mt-app.qkongtao.cn/)
- 源码下载 [码云](https://gitee.com/KT1205529635/mt-app)
- 项目介绍
- 实现功能
- 项目安装
- 打包部署
- 上传之后
- 参考技术文章
项目演示地址 高仿美团网
源码下载 码云
项目介绍
前端 :Nuxt.js/vue-router/ Vuex/ ELement-ui
后端 :Node.js/Koa2/Koa-router/Nodemailer/Passport
HTTP通讯 :Axios
数据支撑 :Mongoose/Redis/高德地图web服务api接口
实现功能
- 登录注册,qq邮箱自动发验证码
- 城市切换:更新不同城市的信息
- search搜索,根据当前城市进行用POI的关键字进行条件搜索
- 高德地图自动定位
项目安装
先安装npx
npm install -g npx
然后用npx安装模板
npx create-nuxt-app project_name
cd到那个目录,启动
cd mt-app
npm run dev
由于无法使用import命令
- 使用babel-node启动
在pockage.json中编译中加入 --exec babel-node
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node","build": "nuxt build","start": "cross-env NODE_ENV=production node server/index.js --exec babel-node",
- 在根目录新建.babelrc文件
{"presets":["es2015"]
}
- 安装对应的插件
cnpm i babel-core babel-preset-es2015 babel-cli
即可使用import导入,并且启动成功
使用sass
cnpm i sass-loader node-sass
项目要求:
- 节省网络请求
- 语义化
- DOM最简化
遇到的问题:
- 在做Vue项目时使用setTimeout,在里面调用this.add()方法,报错this.add 不是一个函数使用settimeout时,此时的this指向window,为什么this指向会变呢?不再指向data对象,因为此时运行的代码是脱离了之前的执行环境
解决:可以在settimeout里面的函数用箭头函数来表示;
或者把data里的this暂时存起来_this=this;
导入数据库
mongoimport -d dbs -c test pois.dat
ssr:服务端直接打在网页上的源码,不需要重渲染
拼音库
可以实现那汉字转拼音
npm i js-pinyin
js按照数组里元素的首字母排序
如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:
若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。
blocks.sort((a, b) => a.title.charCodeAt(0) - b.title.charCodeAt(0));
改json数据结构映射关系是很好改的,改模板结构是很痛苦的
产品列表的智能排序还要重新实现
JavaScript判断元素是否在工作窗口内
function isInViewPortOfOne (el) {const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight ;//窗口可视高度const offsetTop = el.offsetTop;//元素顶部高度const offsetHeight = el.offsetHeight;//元素高度const scrollTop = document.documentElement.scrollTop;//滚动距离//判断是否在工作窗口内const top = (offsetTop+offsetHeight )- scrollTopif(top>0&&top<viewPortHeight){return true}else{return false;}
}
地图如何实现自动定位
380+170
将 list从头开始遍历,直到找到比他大的scollTop,就return
将第一个比它大的point存入vuex里。
然后滚动监听,监听point变化了,就在map组建立传入vuex中的point,然后更新地图
路由:购物车不是先前存在的,只是在商品详情页点击购买的时候用异步方法新创建的购物车
抓取别人的评论是会被起诉的
首页
编程式导航路由传参
this.$router.push({path: "/",query: { name: name }});
//接收参数
this.$router.push(`/products?keyword=${this.$route.query.name}`);
打包部署
npm run build
需要上传的文件
.nuxt目录
package.json
nuxt.config.js
static
server目录
上传之后
- 安装依赖(要安装好PM2,自带node)
npm install - 写自动启动的脚本,内容如下
在项目根目录创建一个pm2.json文件
[{"name": "mt-app","script": "npm run server","env_dev": {"NODE_ENV": "development"},"env_production": {"NODE_ENV": "production"}}
]
- 使用pm2管理启动项目
cd 到项目根目录
pm2 pm2.json启动项目
发现在服务器本地已经启动了 http://localhost:3000
但是没有在外网映射出去,所有使用域名无法访问 - 使用Nginx配置映射
在 nginx.conf下面添加
upstream nodenuxt {server 127.0.0.1:3000; # nuxt 项目监听PC端端口keepalive 64;}
server {#需要映射的端口和域名listen 80;server_name **************.cn;location / {proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";proxy_set_header Host $host;proxy_set_header X-Nginx-Proxy true;proxy_cache_bypass $http_upgrade;proxy_pass http://nodenuxt;}error_page 500 502 503 504 /50x.html;location = /50x.html {root html;}}
配置完之后,发现使用域名可以成功访问,但是出现了资源跨域的问题。
5. 在nuxt.config,js配置文件里面做一下配置
/*** Nuxt.js modules*/modules: ['@nuxtjs/axios','@nuxtjs/proxy'],proxy: [['/api',{target: 'http://cp-tools.cn/', // api主机pathRewrite: {'^/api': '/'}}]],axios: {},
使用接口代理获取资源
就没有出现跨域的现象了
参考技术文章
- koa:koa入门廖雪峰
- 邮件发送:https://www.jianshu.com/p/04e596da7d33
- koa-passport:https://segmentfault.com/a/1190000011557953
https://www.dazhuanlan.com/2019/10/17/5da7a0766667c/ - Nuxt项目的部署:https://juejin.im/post/5b863a93e51d4538884d2772
- 解决跨域问题:https://www.jianshu.com/p/8a2a1cf61025
- PM2部署安装:https://www.cnblogs.com/pzj1023/p/11743480.html
实战:Vue全家桶+SSR+Koa2实现美团网相关推荐
- Vue全家桶+SSR+Koa2全栈开发美团网笔记
实战准备 1.环境准备与项目安装 node 8.12 npm 6.4.1 vue 2.5.17 webpack 4.19 nuxt 2.0.0 1. npm install -g npx 2. npx ...
- Vue全家桶+SSR+Koa2全栈开发美团网⑧——首页登录注册
在pages目录下新建register.vue,点击注册按钮就能跳转至http://localhost:3000/register,因为在user.vue中写过 <nuxt-link to=&q ...
- Vue全家桶+SSR+Koa2全栈开发美团网⑦——首页开发
首页header组件开发 pages目录下的index.vue组件页面默认引用layouts目录下的default.vue模板,所以我们在default.vue模板中直接使用element模板 < ...
- Vue全家桶+SSR+Koa2全栈开发美团网③——mongoose基础
先安装mongoDB,启动数据库 然后安装mongoDB可视化数据管理工具Robo 3T 还是在koa2项目下安装mongoose npm i mongoose 在koa2根目录下新建一个dbs文件夹 ...
- 【Vue全家桶+SSR+Koa2全栈开发】项目搭建过程 整合 学习目录(持续更新中)
写在开头 大家好,这里是lionLoveVue,基础知识决定了编程思维,学如逆水行舟,不进则退.金三银四,为了面试也还在慢慢积累知识,Github上面可以直接查看所有前端知识点梳理,github传送门 ...
- Vue全家桶+MongoDB+Koa2全栈开发网站
github网址MT-PC 实战准备 项目安装: npm install -g npx npx create-nuxt-app project-name npm install --update-bi ...
- vue全家桶+koa2+mongoDB打造全栈社区博客
背景 一直以来都想自己编写一个自己的社区博客,后来在网上找了一下,最后决定参考慕课网的一个社区项目,决定改用vue2.6+AntdForVue+koa2+mongoose实现一套社区博客. 简介 这是 ...
- VUE全家桶项目实战-- 4.后台首页布局
VUE全家桶项目实战-- 4.后台首页布局 一.页面布局 二.创建Home组件 三.路由index.js 文件配置主页路径 四.添加welcome组件 一.页面布局 <el-container& ...
- 视频教程-Vue全家桶前后台分离实战案例(含资料)-Vue
Vue全家桶前后台分离实战案例(含资料) 张长志技术全才.擅长领域:区块链.大数据.Java等.10余年软件研发及企业培训经验,曾为多家大型企业提供企业内训如中石化,中国联通,中国移动等知名企业.拥有 ...
最新文章
- 活着的理由,做事的风格
- exist not exist 分析
- CodeWarrior 初探(1) USBDM 芯片检测
- css3实现流星坠落效果
- python技术是什么_学 Python 都用来干嘛的?
- IT从业的迷思与破解之道(更新)
- JDBC数据对象存储
- tp5 的查询构造器
- 一个想法(续四):IT技术联盟创业众筹进度公示
- Digilent提供的PmodOLEDrgb驱动程序
- (七)对Jmeter进行参数化的俩种方式
- css12个技巧,12个CSS高级技巧汇总
- 帮助开发者快速创建响应式布局的Boilerplate - Responsive Boilerp...
- 最全计算机基础知识竞赛试题及答案,计算机基础知识竞赛试题.doc
- spring使用之旅 ---- bean的装配
- Python实现照片更换背景色
- Qt 笔锋 钢笔 压力值
- matlab显示hsi,matlab实现RGB与HSI的相互转换
- CentOS7-查看和设置日期时间
- 如何统计代码总行数:指令