Vue

实战:Vue全家桶+SSR+Koa2实现美团网

Nick · 3月10日 · 2020年 · 本文3333字 · 阅读9分钟1,103

项目演示地址

高仿美团网

源码下载

码云

项目介绍

前端 :Nuxt.js/vue-router/ Vuex/ ELement-ui
后端 :Node.js/Koa2/Koa-router/Nodemailer/Passport
HTTP通讯 :Axios
数据支撑 :Mongoose/Redis/高德地图web服务api接口
实战:Vue全家桶+SSR+Koa2实现美团网-左眼会陪右眼哭の博客

实现功能

  1. 登录注册,qq邮箱自动发验证码
  2. 城市切换:更新不同城市的信息
  3. search搜索,根据当前城市进行用POI的关键字进行条件搜索
  4. 高德地图自动定位

项目安装

先安装npx
npm install -g npx
然后用npx安装模板
npx create-nuxt-app project_name
cd到那个目录,启动
cd mt-app
npm run dev

由于无法使用import命令
1. 使用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",
  1. 在根目录新建.babelrc文件
{
"presets":["es2015"]
}
  1. 安装对应的插件
    cnpm i babel-core babel-preset-es2015 babel-cli
    即可使用import导入,并且启动成功

使用sass
cnpm i sass-loader node-sass

项目要求:
1. 节省网络请求
2. 语义化
3. DOM最简化

遇到的问题:
1. 在做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 )- scrollTop
if(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
需要上传的文件
1. .nuxt目录

  1. package.json

  2. nuxt.config.js

  3. static

  4. server目录

上传之后

  1. 安装依赖(要安装好PM2,自带node)
    npm install
  2. 写自动启动的脚本,内容如下
    在项目根目录创建一个pm2.json文件
[
{
"name": "mt-app",
"script": "npm run server",
"env_dev": {
"NODE_ENV": "development"
},
"env_production": {
"NODE_ENV": "production"
}
}
]
  1. 使用pm2管理启动项目
    cd 到项目根目录
    pm2 pm2.json启动项目
    发现在服务器本地已经启动了 http://localhost:3000
    但是没有在外网映射出去,所有使用域名无法访问
  2. 使用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: {},

使用接口代理获取资源
就没有出现跨域的现象了

参考技术文章

  1. koa:koa入门廖雪峰
  2. 邮件发送:https://www.jianshu.com/p/04e596da7d33
  3. koa-passport:https://segmentfault.com/a/1190000011557953
    https://www.dazhuanlan.com/2019/10/17/5da7a0766667c/
  4. Nuxt项目的部署:https://juejin.im/post/5b863a93e51d4538884d2772
  5. 解决跨域问题:https://www.jianshu.com/p/8a2a1cf61025
  6. PM2部署安装:https://www.cnblogs.com/pzj1023/p/11743480.html
0 条回应
在线人数:1人 来访统计
说谎
林宥嘉
隐藏