molunerfinn / vue-koa-demo Goto Github PK

View Code? Open in Web Editor NEW

757.0 24.0 166.0 755 KB

:beginner:A simple full stack demo(CSR & SSR & Docker Support) written by Vue2 & Koa2(Koa1 verson also completed)

License: MIT License

JavaScript 79.16% HTML 0.69% Vue 18.91% Shell 0.24% Dockerfile 1.00%

vue todolist koa koa2 mysql vue-koa-demo vue2 jest jest-tests vue-ssr

vue-koa-demo's Introduction

vue-koa-demo

A fullstack demo used Vue2 & Koa2(Koa1 version is here)

☀️ Easy to setup and learn

💯 Api test coverage

🚀 Instant feedback

😜 Vue SSR support in the ssr branch

🎉 Docker support

View the article for more details.

If you want to check the info of the test, view the article for more details.

Install

git clone https://github.com/Molunerfinn/vue-koa-demo.git

npm install or yarn

if you are using yarn & meet this error:

error [email protected]: The engine "node" is incompatible with this module. Expected version ">=4 <=9".

please use

yarn --ignore-engines

Also you need to install MySQL & create a database named todolist,and execute 2 sql files list.sql & user.sql.They are in sql/

After that, create a .env file and set the database username & password:

# your database username
DB_USER=XXXX
# your database
DB_PASSWORD=YYYY 
# Koa is listening to this port
PORT=8889

If you want to run the test for the Project, please create a .env.test file to face this situation:

# your database username
DB_USER=XXXX
# your database
DB_PASSWORD=YYYY 
# The port which is listened by koa in the test environment
PORT=8888

Run

Node.js & Docker support. You need to create a .env file as above.

Node.js

Beacuse of using Koa2, Node.js >= v7.6.0 is needed.

Development:

npm run dev && npm run server

open browser: localhost:8080

tips: login password is 123

Production:

npm run start

open browser: localhost:8889

tips: login password is 123

Test:

npm run test and find the coverage report in the coverage/lcov/index.html

Docker

docker-compose build && docker-compose up

mysql in docker use 3306 port inside & outside.

open browser: localhost:8889

tips: login password is 123

License

MIT

vue-koa-demo's People

Contributors

Stargazers

Watchers

Forkers

sujinw dongsipan tianya1015 lamb2014 didida gunsnakee hanmichael kwl777 eryouhao 5vbear gengjiawen leenty snakeliwei chiyaoching congtouzai kjyu winterzhao nar142857 gateslu chenhm123 xiehongguang niurenyige fanlei1988 weifenghuang ghlualven oo10 se7enups jerry-n-du 349032805 welcometoearth f1084 pppppppppppp12 lysk mosutw flowergu yuannianfeng jiapeiyang rosong1 jobop sumshare vincent1996 ymy0 finderl zhaoguangwei outoffspace linyongping lightyourfire gk7261234 yisen99 guardwu2015 iwtbabh yaitsky pircs jkcaptain jiangsheng1209 d-f0ur omiomi lichengtao1989 nekolr rasir1608 combobo wwb568109135 guoyu07 donny2333 8agame 294650171 fruitcow rihel cyxuan0926 sailiy kuangzhibin gloveit fzs755 love2157dream chenhaiyun pang-baixu chenfengyanyu mybigman akesure lasiaz gentoos163 wmiya mixmastert kennow erictop3 lmclmclmc18 ghub2016net 345632699 songzcn skyformat99 sonsong viktortat laneyhui wtowto7207 tangkunlin sunbeam-young chentianyuan weiyunpeng timyuheng mangocafe

vue-koa-demo's Issues

你好。访问接口504错误是啥原因呢？

npm run dev跑起来之后，
登陆接口报错

[HPM] Error occurred while trying to proxy request /auth/user from localhost:8080 to http://localhost:8889 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

let port = process.env.PORT ????

你起了两个服务么？

我有点没看懂，
vue-cli里面已经用express起了一个服务，然后你单独用koa又启动了一个服务，是这样么？
我这里有两个问题：

koa的端口你写的是8989，但是vue-cli的默认端口是3000吧，这个会冲突么？
你是如何在8989端口监听到webpack所编译的文件的呢？就像在vue-cli的dev-server.js中有app.use(devMiddleware)来做这一步。

为什么要将所有的路由信息直接放在controllers里面呢

为什么要将所有的路由信息直接放在controllers里面呢，如果是多个controllers的情况下，那不是有问题了吗？而且这样分层的情况不是很好吧

Add test for server

I am familiar with node test, can you add some test case for server ?

博客上的评论没了?

https://molunerfinn.com/
我记得以前是有评论的啊,为什么现在都看不到了=.=
难道记错地方了?

前端无法引用后端模块jsonwebtoke

你好，我在vue组件中引入jsonwebtoken模块时，报错如下：

ERROR Failed to compile with 2 errors 22:10:55

These dependencies were not found:

net in ./~/joi/lib/string.js
dns in ./~/isemail/lib/isemail.js

To install them, you can run: npm install --save net dns

Listening at http://localhost:8080

这个要怎么解决，按它的提示安装额外的后端模块也不奏效。。

如果组件a依赖于组件b,组件b依赖于全局的方法（此全局方法为自己封装的），那么如何才能引入此全局方法，完成单元测试呢？
ps：因为客观原因，无法把此全局方法打包出来
尝试的解决方案：
const video = require('../../src/module/tools/index.js')
1 Vue.use(video)
不能成功，因为index.js不是npm包，所以没办法识别
2 把index方法挂载到全局，但是依然没有生效,求教大佬解决方案

前端直接解析token是不是太危险？

server-entry.js 使用babel registry在生产环境是否会造成性能问题

ssr index.html的问题

模板index.html的代码

<body>
    <!--vue-ssr-outlet-->
</body>

app.vue的代码：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

entry-client.js代码

router.onReady(() => {
  app.$mount('#app')
})

由于app.vue具有id为app的元素,
所以服务端渲染的时候会返回

<div id="app" data-server-rendered="true">
   <img src="base64.xxxxx"/>
   ....
</div>

网页加载完成后，js开始执行，由于楼主写了app.$mount('#app'), 所以会把服务端渲染的<div id="app" data-server-rendered="true">替换掉，这样的服务端渲染是正确的吗？

感谢博主解答。ssr有点难呀。在踩着坑，哎。

Is it okay to add eslint for this project ?

Security issue

Md5 can't be used to encrypt password, you need to use bcrypt or something else.

数据库连接报错

大神,我参照你的写法,出现了如下的数据连接错误,不知道你是否有遇到过

Use babel for server dev

Is is okay to use babel for server dev, I can send a pr.

想搭建远程调试，一直不成功

git clone后已经成功运行。

想搭建远程调试，一直不成功

server和前端已经在远程服务器运行起来，怎么远程调试？

参考N多文章没有成功，例子都是介绍非常简单的node普通的单例，好像这个demo启动参数有点多

远程服务器启动调试配置

$ node --inspect

或者

$ node --inspect-brk app.js

可以运行，但链接不上。一直timeout.

$ node --inspect app.js

直接报错，

启动配置

{
// Use IntelliSense to learn about possible Node.js debug attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [

  {
    "type": "node",
    "request": "attach",
    "name": "Attach to Remote",
    "address": "192.168.65.131",
    "port": 9229,
    "localRoot": "${workspaceFolder}",
    "remoteRoot": "/home/test/vue-koa-demo/"
  }
]
}

哪里错了？
服务器：ubuntu 18.

关于开发环境下ssr的问题

package.json文件的代码：

 "server": "nodemon -w app.js -w server server-entry.js"

在命令行输入npm run server后，运行app.js文件
此时环境为development, 那么会走下面if else 的第二部分代码
博主在这里为何只拿到服务端打包的vue-ssr-server-bundle.json
而没有传入客户端打包的vue-ssr-client-manifest.json

app.js文件的代码：

if (isProd) {
  const template = fs.readFileSync(templatePath, 'utf-8')
  const bundle = require('./dist/vue-ssr-server-bundle.json')
  const clientManifest = require('./dist/vue-ssr-client-manifest.json')
  renderer = createRenderer(bundle, {
    template,
    clientManifest
  })
  app.use(serve(path.resolve('dist'), {
    hidden: 'index.html'
  }))
} else {
  require('./build/setup-dev-server')(app, (bundle, template) => {
    renderer = createRenderer(bundle, { template })
  })
}

新年好，楼主请帮忙，这是es6的转义导致的吗？

项目跑起来了，但是登录接口报504，登录不了。

$ npm run dev

[email protected] dev C:\Users\Administrator\Desktop\2017.6\vue-koa-demo
node build/dev-server.js

[HPM] Proxy created: /auth -> http://localhost:8889
[HPM] Proxy created: /api -> http://localhost:8889

Starting dev server...
DONE Compiled successfully in 8258ms12:41:49

Listening at http://localhost:8080

[HPM] Error occurred while trying to proxy request /auth/user from localhost:8080 to http://localhost:8889 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

配置了自己的mysql密码，这是什么原因导致的呢。

Docker support

Add docker support for easy development.

运行时遇到一些问题

[HPM] Error occurred while trying to proxy request /auth/user from localhost:8080 to http://localhost:8889 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

为什么不能使用import

我只要是写了import或者export default等es6的东西，就会报以下错误，怎么破。。

ssr webpack-hot-middleware error

node -v v11.10.0
npm -v 6.7.0
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.18.2"
yarn server or npm run server
f5 刷新頁面
D:***\node_modules\webpack-hot-middleware\middleware.js:104
if (!res.finished) res.end();
^

TypeError: res.end is not a function
at IncomingMessage. (D:\work\dfrc-front\node_modules\webpack-hot-middleware\middleware.js:104:32)
at IncomingMessage.emit (events.js:197:13)
at abortIncoming (_http_server.js:451:9)
at socketOnEnd (_http_server.js:466:5)
at Socket.emit (events.js:202:15)
at endReadableNT (_stream_readable.js:1129:12)
at processTicksAndRejections (internal/process/next_tick.js:76:17)
[nodemon] app crashed - waiting for file changes before starting...

can't the api ：$message. I can't find any definition of that in the source code.

this.$message({ // 登录成功，显示提示语
              type: 'success',
              message: '登录成功！'
            });

ctx.request.body获取不到post请求的参数

Vue.prototype.$http = axios 报错

您好：
我在编写测试用例的时候这段报错，提示$http只有getter方法，请问您有遇到过这个问题吗？
TypeError: Cannot set property $http of #<Vue$3> which has only a getter

下载项目安装依赖后node app.js报错

报错内容：
D:\study\koa-node0519\vue-koa-demo-master\app.js:18
app.use(async function(ctx, next){
^^^^^
SyntaxError: missing ) after argument list
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3

作者大大，方便交流下nginx配置吗？

您好，我已经看过您的文章，但是我疑惑的是server代码是不是要放在服务器里，然后是怎么启动的，每次都要手动的node server_entry.js吗，盼回复，感谢您！

bcrypt.compareSync is not a function

我在实现登录的过程中报错：“bcrypt.compareSync is not a function”。可是我在controllers/users.js引入了bcryptjs，项目依赖中也添加了bcryptjs。

why do you use 'koa-json' in koa 2 version ?

I find koa-json does not support koa 2 version, see link

and I find 'koa-bodyparser' also can support json , A body parser for koa, base on co-body. support json, form and text type body.

so why do you still use it in koa 2 version not only use koa-bodyparser ? thanks

啥时候换成async了，注释没改

注释还是生成器函数，看的有点出戏。
const getUserById = async function(id){ // 注意是function* 而不是function 对于需要yield操作的函数都需要这种generator函数。

The code don't encrypt the password in the client ?

By looking up the network, I have found that, the code don't encrypt the password in the client .

It's confusing for me to understand what you say in your tutorial.

用户在登录页输入账号密码，将账号密码（密码进行md5加密）发送请求给后端

应该写个注册，实现密码加密存入数据库

代理端口号出错

➜ vue-koa-demo git:(master) ✗ npm run dev && npm run server

[email protected] dev /Users/XNW/Documents/Vuejs_workspace/vue-koa-demo
node build/dev-server.js

[HPM] Proxy created: /auth -> http://localhost:8889
[HPM] Proxy created: /api -> http://localhost:8889

Starting dev server...

DONE Compiled successfully in 5084ms 17:02:41

Listening at http://localhost:8080

[HPM] Error occurred while trying to proxy request /auth/user from localhost:8080 to http://localhost:8889 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

can this framework handle image uploading and hosting?

vscode调试时，项目语法报错

在使用vscode对koa server部分进行调试时，启动报错，

SyntaxError: Unexpected token function
/Users/xiongsheng/personal_project/Github/vue-koa-demo/node_modules/koa-jwt/lib/index.js:17
    const middleware = async function jwt(ctx, next) {
                             ^^^^^^^^
SyntaxError: Unexpected token function

我的launch.json配置如下

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/server-entry.js",
            "sourceMaps": true,
            "runtimeExecutable": null,
            "runtimeArgs": [
            ],
            "outFiles": []
        }
    ]
}

想知道launch.json该如何配置

node:8.2.1 SyntaxError: Unexpected token import

npm start dev is ok, but when I run node app.js, I got these:

▶ node app.js 
/Users/simon/workspace/studyCode/node/vue-koa-demo/app.js:1
(function (exports, require, module, __filename, __dirname) { import Koa from 'koa';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Function.Module.runMain (module.js:605:10)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:575:3

I use nvm to install [email protected], I saw koa2 need version 7.6+.

运行时报错

Error occurred while trying to proxy request /auth/user from localhost:8080 to http://l
ocalhost:8889 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

ssr分支->reademe.md 对.env配置说明有误

如：

下面这种是错误的，会被解析为 process.env.DB_USER="XXXX # your database username"

DB_USER=XXXX # your database username

下面这种是正确的，才会被正确解析为 process.env.DB_USER="XXXX"

## your database username
DB_USER=XXXX

按照教程安装完成后，指向序列化数据库生成对应的js老是提示没有安装mysql?

sequelize-auto -o "./schema2" -d todolist -h 127.0.0.1 -u root -p 3306 -x root -e mysql

**Error: Please install mysql package manually**

sequelize-auto -o "./schema2" -d todolist -h 127.0.0.1 -u root -p 3306 -x root-e mysql

我的是ubuntu18.04,mysql版本是

mysql Ver 14.14 Distrib 5.5.60, for Linux (x86_64) using readline 5.1

molunerfinn / vue-koa-demo Goto Github PK

vue-koa-demo's Introduction

vue-koa-demo

Install

Run

Node.js

Development:

Production:

Test:

Docker

License

vue-koa-demo's People

Contributors

Stargazers

Watchers

Forkers

vue-koa-demo's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs