vue-express-mogodb_SPAはjsを使って前後端を作ります.

SPA_express-vue-mongodb
a SPA project all use javascript lang.
プロジェクトのアドレスhttps://github.com/malaimoo/SPA_express-vue-sequelize
準備工作
1.express、express-cliをインストールする
2.node jsをインストールする
3.vue、vue-cliをインストールする
1.express-cli
express足場を使って空いている項目を作成し、グローバルインストール:

npm install express-generator -g

プロジェクトディレクトリの下に生成

express <myapp>

生成されたディレクトリ構造

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade

この中で、pubicは静的なファイルです.カタログを見ても、jsやcssなどを入れることが分かります.後は私たちがvue buildで出たjsをこの中に入れます.expressは解決してくれます.その時はwww.xxx.com/javascritps/a.jsでa.jsというファイルにアクセスできます.
一番重要なエントランスファイル、indexとapを見てください.
indexファイルはnodejsのhttpモジュールを使ってサーバーを起動し、エラーを傍受します.
appはexpressモジュールをロードします.そして、routeを使用して要求をルーティングする.後に私たちはこの二つのルートを通して静的ページ(vueパッケージ後のファイル)とapiインターフェースの要求をそれぞれ管理します.
ここでレンダリングします.私たちはejsテンプレートを使用します.このようにすれば生成されたindex.も修正しなくてもいいです.

app.set('view engine', 'ejs');

2.vue-cli
以下はvue-cliで空いているvue項目を生成します.あなたを行きます

#      vue-cli
$ npm install --global vue-cli
#        webpack       
$ vue init webpack my-project
#     ，  
$ cd my-project
$ npm install

vueのプロジェクトはどのように変更しなくてもいいです.パッケージのパスを上のサブ武器の住所に変えます.
3.ここに来たら、前後を一緒にしましょう.
ファイルを新規作成してから、express-vue

npm init

一つのpackage.jsonを生成して、vueの依存とexpressの依存を全部このpackage.jsonの中に入れます.
その後、Babel registerを配置する必要がありますので、プロジェクトとパスの下で2つのファイル.babelrcとindex.jsを追加する必要があります.
//babelrc

{
  "presets": ["es2015"],
}

babelrcはBabel 6.0に必要な書類です.
//index.js

require('babel-register')
require('./src/server')

上記の2つはBebel登録を完了し、requireまたはimportの方式に依存するすべてのモジュールを登ってES 5に翻訳します.
Expressが自動的に生成したコードの中にwwwファイルがあります.彼はExpressアプリケーションの入口ファイルです.私たちはserverパスの下に置いて、index.jsと改名して、上に配置されたBabel registerが正しく見つけられるようにします.
なぜindex.jsと改名しましたか?これはrequire('./src/server')がデフォルトで探しています./src/server/index.jsが別の名前を使いたいなら、Babel registerの配置ファイルをrequire(./src/に変更してください.
それぞれvueをclientに移動して、expressをserverのフォルダに移動します.
4.結合した仕事をする
今はそれらを一緒に置いていますが、まだ運行していません.
4.1 Vueを直接serverの静的ファイルに梱包する
まずvueのwebpackを修正して、梱包先をserverの「/pullic」フォルダに変更します.indexの出力はそのまま拡張子ejsに変更します.
vue configを修正します

...
index: path.resolve(__dirname, '../../server/public/index.ejs'),
    assetsRoot: path.resolve(__dirname, '../../server/public/javascripts'),
    assetsSubDirectory: '',
...

4.2次に、nodemonを使ってプロセス管理をする.
これを前提に、Nodemonでserverを起動し、コードの変更をモニターする予定です.Nodemonはデフォルトでモニターします.gitとnode_.modulesパス以外のすべてのjsコードは、すでにWebpackのヘッドコードがありますので、関連する構成をしてNodemonにあるコードだけを傍受させます.
プロジェクトルートにファイルnodemon.jsonを追加しました.内容は

{
  "verbose": true,
  "ignore": ["src/server/public/"],
  "events": {
    "restart": "osascript -e 'display notification \"App restarted due to:
'$FILENAME'\" with title \"nodemon\"'"
  },
  "watch": ["src/server/"],
  "env": {
    "NODE_ENV": "development"
  },
  "ext": "js jade"
}

この中で、verboseをtrueに設定して、より豊富なログ情報を印刷して、開発に役立ちます.
私たちはNodemonにsrc/server/ディレクトリをモニターしてもらい、src/server/publicディレクトリを無視します.そこはフロントエンドのwebpackでパッケージファイルを作成するところです.注意私たちはExpressのミドルウェアとしてWebpackを使っていますが、ディスク上では本当にファイルが生成されないので、このignoreルールは省略できます.
6.sequelizejs ORMを追加
データベースというのは本来はmongodbを使いたいので、直接データベースを書くのは面倒くさいかもしれないと思います.だから、ORMフレームを直接引用しましょう.sqllite myqlなどのデータベースをサポートします.
デバッグする時はmysqlデータベースを開けなければなりません.私達のexpressサービスがこのデータベースにリンクできます.mysql公式サイトでダウンロードし、可視化管理端末MySQL Workbenchをダウンロードします.最後に私たちは127.1.0.1:3306でデータベースをオープンしました.
modelsフォルダの下にuser.jsファイルを新規作成します.sequelizejsモデルの作成とデータベースのリンクを行います.

// server/models/user.js
var Sequelize = require('sequelize');
var sequelize = new Sequelize(
    'sys',    //    
    'root',             //   
    'xiaocai',             //  
    {
        'dialect': 'mysql',
        'host': 'localhost',
        'port': 3306
    }
);

//      
var Message = sequelize.define('user', {
    id:{ //   id,  ,  
        type:Sequelize.INTEGER,
        primaryKey: true,
        autoIncrement:true
    },
    username: { //    
        type: Sequelize.STRING(300)
    },
    password: { //     
        type: Sequelize.STRING(300)
    }
});
Message.sync(); //   

module.exports = Message;

このように私達はrouterのusers.jsに二つのインターフェースを追加します.一つは作成、一つはクエリです.

var express = require('express');
var router = express.Router();
var user = require('../models/user');

/* GET users listing. */
router.get('/', function(req, res, next) {
    //    id  id  ,    
    if (req.query.username == undefined ||req.query.username== ''
        || req.query.password == undefined || req.query.password == '') {
        res.json({status:-1, statusMsg:'    '});
        return;
    }
    user.findOne({
        where:{
            username:req.query.username
        }
    }).then(function(user){
        if (user.password == req.query.password){
            res.json({status:1});
        }else {
            res.json({status:-1,statusMsg:'    '});
        }
    }).catch(function (error) {
        res.json(error)
    });
});


router.get('/create',function (req,res,next) {
    //    post        ,    
    if (req.query.username == undefined ||req.query.username== ''
        || req.query.password == undefined || req.query.password == '') {
        res.json({status:-1, statusMsg:'    '});
        return;
    }
    var message = {
        username: req.query.username,
        password: req.query.password
    };
    //      ,          
    user.create(message).then(function(msg){
        res.json({status:1});
    });
});


module.exports = router;

vueの中でユーザーを作成して検索することができます.私はここでそれを登録(作成)登録(クエリ)にシミュレーションしました.
5.buildを使って完成した後のプロジェクトをテストします.

は、clintフォルダ内で「npm run dev」を実行します.ここでブラウザは自動的にページを開くべきです.そうでないとlocal host:8080を開けます.

はServerフォルダでnpm run devを実行して、expressサーバを起動します.

ここでserverのap.jsのルートを確認すると、次のようになります.

var index = require('./routes/index');
app.set('view engine', 'ejs');
app.use('/', index);

根要請はindex.ejsに訪問するという意味です.私たちが包装したvueプロジェクトです.