前后端项目从零开始(ssr)

1.创建一个项目（new-project）

执行 npm init -y;

2.借鉴了yii项目结构 把basic里面的内容放到（new-project）里面  把没用的都删掉

 3.开发controller目录 此目录控制路由

 4.编辑app.js

安装koa   npm install koa --save-dev

--save-dev  开发模式下  === -D

--save 线上模式 === -S

webpakck 上线不需要  装-D里面

const app = new Koa();

 监听了3000端口的服务

下面截图中的端口设置一致就行骂我这是好几次整理出来的 端口不对应  按照自己监听的端口就可以

 用nodemon(监听文件变动， 变动之后自动重启) 启动app.js

如果没有 nodemon命令  npm install -g nodemon


nodemon app.js

或者使用supervisor  

supervisor app.js

在浏览器中输入localhost:3000 看服务是否启动成功

 

 

这就算是服务启动成功了

(pm2)待研究

配置config/index.js ------->项目配置文件

使用了函数式编程  lodash库  npm install --save lodash

 配置package.json

如果安装的nodemon   "start": "cross-env NODE_ENV=development nodemon app.js" 

如果安装的supervisor   "start": "cross-env NODE_ENV=development supervisor app.js" 

配置了这个就可以使用npm命令来运行项目了  同时也知道项目是在什么环境下运行的

记得安装 cross-env插件   npm install --save cross-env

NODE_ENV=development 这句话config/index.js if判断要用

如果不知道包去哪找  去github上一般在最下面都有

以koa为例  找koa的中间件

 路径： https://github.com/koajs/koa/wiki

 在客户端执行 npm run start命令

 

建立路由

本人用的koa-simple-router

npm install koa-simple-router --save

https://www.npmjs.com/package/koa-simple-router 查看详情

修改controlls/index.js  配置相应的路由并导出

 修改 app.js 

 

添加     require('./controllers')(app);   导出的是一个function 带参数   故可以传参数

 配置controller/Controller.js

配置controller/ApiController.js

配置controller/IndexController.js

 

 配置controller/index.js  配置真正的路由（还有假路由 spa都为假路由）

修改config/index.js

开始引用视图模板   koa-swig

npm install koa-swig --save   https://www.npmjs.com/package/koa-swig 查看api使用

修改app.js 引用co模块 设置全局变量 context

引入了koa-swig 就可以渲染模板了

 

在views里面创建 index.html 

 

服务正常运行 但是页面上是空对象 {} 说明模板引用成功，但是是异步渲染 因此要加 await  await使用必须跟async一起 

 

 

ytd-rich-shelf-renderer （浏览器原生dom）

单页面的弊端 需要一系列的编译最后呈现出视图

都配置好了，创建vue项目 

首先安装vue-cli 只有vue3.xxx才支持这样的命令

vue create hello-world项目

安装完成之后 cd hello-word

npm run build  只是想拿到vue打包后的文件放到之前创建的new-project项目中

把views目录中的index.html用dist里面的index.html替换

把静态文件全放到assets目录中

下载koa 的静态包 npm install --save koa-static

修改config/index.js

设置静态包路径

 

 修改app.js 添加静态包依赖

配置静态文件 详情请看 https://www.npmjs.com/package/koa-static

查看localhost:3000页面 

 

 

 当在浏览中输入localhost:3000/about时  为Not Found 是因为但单页面使用的是假路由

如果想支持假路由  项目需要安装 koa2-connect-history-api-fallback 包

npm install --save  koa2-connect-history-api-fallback

修改app.js 详细请看 https://www.npmjs.com/package/koa2-connect-history-api-fallback

 设置完之后就可以正常访问了

ssr 服务端渲染

我把之前views/index.html 改成了views/index-back.html 后新建了一个index.html

assets文件夹里面新建了scripts文件夹 后又新建了index.js

去http://www.staticfile.org/ 搜索了vue.js    使用了2.6.11版本

去vue官网找一段代码 放到index.html里面  https://cn.vuejs.org/v2/guide/（vue官网）

 在assets文件中新建一个scripts文件 新建index.js

通过访问localhost:3000 请求的是node服务端真正的路由 

 

 没有显示出 Hello Vue 是因为vue模板渲染方式跟koa渲染方式一样导致的 都是用{{}}  修改koa渲染方式 app.js

 修改controller/IndexController.js  返回data数据

修改index.html

再此访问localhost:8081

这样一个简单的服务端渲染页面就完成了