├── store
    ├── index.js
    └── README.md
├── static
    ├── favicon.ico
    └── README.md
├── pages
    ├── index.vue
    ├── README.md
    ├── user
    │   ├── logout.vue
    │   ├── my-account.vue
    │   ├── login.vue
    │   └── register.vue
    └── articles
    │   ├── index.vue
    │   ├── _id
    │       ├── index.vue
    │       └── update.vue
    │   └── add.vue
├── components
    ├── README.md
    └── Logo.vue
├── todo.md
├── .editorconfig
├── layouts
    ├── README.md
    └── default.vue
├── assets
    └── README.md
├── plugins
    └── README.md
├── api
    ├── models
    │   ├── User.js
    │   └── Article.js
    ├── routes
    │   ├── users.js
    │   └── articles.js
    ├── db.js
    ├── index.js
    ├── config.js
    └── controllers
    │   ├── usersController.js
    │   └── articlesController.js
├── middleware
    └── README.md
├── package.json
├── server
    └── index.js
├── README.md
├── .gitignore
└── nuxt.config.js


/store/index.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aslamdoctor/nuxt-with-express/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Home</h1>
 4 |     <hr>
 5 | 
 6 |     <h3>Welcome to Express CRUD</h3>
 7 |   </div>
 8 | </template>
 9 | 
10 | 


--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | The components directory contains your Vue.js Components.
6 | 
7 | _Nuxt.js doesn't supercharge these components._
8 | 


--------------------------------------------------------------------------------
/todo.md:
--------------------------------------------------------------------------------
 1 | # Tasks
 2 | 
 3 | - [x] CRUD With Express API
 4 | - [x] Form Validations
 5 | - [x] Notifications
 6 | - [x] Authentication
 7 | - [x] Add security to API routes
 8 | - [ ] Add CORS security
 9 | - [ ] Module Relationships
10 | - [ ] File Upload
11 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your Application Layouts.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
8 | 


--------------------------------------------------------------------------------
/pages/README.md:
--------------------------------------------------------------------------------
1 | # PAGES
2 | 
3 | This directory contains your Application Views and Routes.
4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application.
5 | 
6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).
7 | 


--------------------------------------------------------------------------------
/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
8 | 


--------------------------------------------------------------------------------
/pages/user/logout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Logging out</h1>
 4 |     <hr>
 5 | 
 6 |     <p>Please wait...</p>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   middleware: 'auth',
13 | 
14 |   async asyncData(context){
15 |     await context.$auth.logout()
16 |   },
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
8 | 


--------------------------------------------------------------------------------
/api/models/User.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose');
 2 | const Schema = mongoose.Schema;
 3 | 
 4 | const User = new Schema ({
 5 |   full_name: { type: String, required: true },
 6 |   email: { type: String, required: true, index: { unique: true } },
 7 |   password: { type: String, required: true },
 8 | });
 9 | 
10 | module.exports = mongoose.model('User', User)
11 | 


--------------------------------------------------------------------------------
/api/models/Article.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose');
 2 | const Schema = mongoose.Schema;
 3 | 
 4 | const Article = new Schema ({
 5 |   title: { type: String, required: true, index: { unique: true } },
 6 |   author: { type: String, required: true },
 7 |   body: { type: String, required: true },
 8 | });
 9 | 
10 | module.exports = mongoose.model('Article', Article)
11 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
1 | # MIDDLEWARE
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your application middleware.
6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
7 | 
8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
9 | 


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your Vuex Store files.
 6 | Vuex Store option is implemented in the Nuxt.js framework.
 7 | 
 8 | Creating a file in this directory automatically activates the option in the framework.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 | 


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your static files.
 6 | Each file inside this directory is mapped to `/`.
 7 | Thus you'd want to delete this README.md before deploying to production.
 8 | 
 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`.
10 | 
11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
12 | 


--------------------------------------------------------------------------------
/api/routes/users.js:
--------------------------------------------------------------------------------
 1 | const config = require('../config')
 2 | const { Router } = require('express')
 3 | 
 4 | const router = Router()
 5 | 
 6 | // Initialize Controller
 7 | const usersController = require('../controllers/usersController')
 8 | 
 9 | // Register
10 | router.post('/users/register', usersController.register)
11 | 
12 | // Login
13 | router.post('/users/login', usersController.login)
14 | 
15 | // Get User
16 | router.get('/users/user', usersController.user)
17 | 
18 | module.exports = router
19 | 


--------------------------------------------------------------------------------
/pages/user/my-account.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>My Account</h1>
 4 | 
 5 |     <hr>
 6 | 
 7 |     <div class="card">
 8 |       <div class="card-body">
 9 |         <h4>{{ this.$auth.user.full_name }}</h4>
10 |         <div class="mb-5"><strong>Email:</strong> {{ this.$auth.user.email }}</div>
11 |         <nuxt-link to="/user/logout" class="btn btn-danger">Logout</nuxt-link>
12 |       </div>
13 |     </div>
14 | 
15 | 
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | export default {
21 |   middleware: 'auth'
22 | }
23 | </script>
24 | 


--------------------------------------------------------------------------------
/api/db.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose');
 2 | mongoose.connect('mongodb://localhost/nodekb', {
 3 |                             useNewUrlParser: true,
 4 |                             useUnifiedTopology: true,
 5 |                             useFindAndModify: false,
 6 |                             useCreateIndex: true
 7 |                           });
 8 | var db = mongoose.connection;
 9 | db.on('error', console.error.bind(console, 'connection error:'));
10 | db.once('open', function callback () {
11 |   console.log("MongoDB Connected...");
12 | });
13 | 
14 | module.exports = db
15 | 


--------------------------------------------------------------------------------
/api/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express')
 2 | const db = require('./db')
 3 | 
 4 | 
 5 | // Create express instnace
 6 | const app = express()
 7 | 
 8 | // Init body-parser options (inbuilt with express)
 9 | app.use(express.json());
10 | app.use(express.urlencoded({ extended: true }));
11 | 
12 | 
13 | // Require & Import API routes
14 | const users = require('./routes/users')
15 | const articles = require('./routes/articles')
16 | 
17 | // Use API Routes
18 | app.use(users)
19 | app.use(articles)
20 | 
21 | // Export the server middleware
22 | module.exports = {
23 |   path: '/api',
24 |   handler: app
25 | }
26 | 


--------------------------------------------------------------------------------
/api/config.js:
--------------------------------------------------------------------------------
 1 | const jwt = require('jsonwebtoken');
 2 | 
 3 | const config = {
 4 |   authSecret:'mysecret',
 5 | }
 6 | 
 7 | module.exports = config
 8 | 
 9 | module.exports.isAuthenticated = function (req, res, next) {
10 |   var token = req.headers.authorization
11 |   if (token) {
12 |     // verifies secret and checks if the token is expired
13 |     jwt.verify(token.replace(/^Bearer\s/, ''), config.authSecret, function(err, decoded) {
14 |       if (err) {
15 |         return res.status(401).json({message: 'unauthorized'})
16 |       } else {
17 |         return next();
18 |       }
19 |     });
20 |   }
21 |   else{
22 |     return res.status(401).json({message: 'unauthorized'})
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/api/routes/articles.js:
--------------------------------------------------------------------------------
 1 | const config = require('../config')
 2 | const { Router } = require('express')
 3 | 
 4 | const router = Router()
 5 | 
 6 | // Initialize Controller
 7 | const articlesController = require('../controllers/articlesController')
 8 | 
 9 | // Get All
10 | router.get('/articles', articlesController.list)
11 | 
12 | // Get One
13 | router.get('/articles/:id', articlesController.show)
14 | 
15 | // Create
16 | router.post('/articles', config.isAuthenticated, articlesController.create)
17 | 
18 | // Update
19 | router.put('/articles/:id', config.isAuthenticated, articlesController.update)
20 | 
21 | // Delete
22 | router.delete('/articles/:id', config.isAuthenticated, articlesController.delete)
23 | 
24 | module.exports = router
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-with-express",
 3 |   "version": "1.0.0",
 4 |   "description": "My primo Nuxt.js project",
 5 |   "author": "Aslam Doctor",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
 9 |     "build": "nuxt build",
10 |     "start": "cross-env NODE_ENV=production node server/index.js",
11 |     "generate": "nuxt generate"
12 |   },
13 |   "dependencies": {
14 |     "@nuxtjs/auth": "^4.8.5",
15 |     "@nuxtjs/axios": "^5.9.3",
16 |     "bcryptjs": "^2.4.3",
17 |     "bootstrap": "^4.1.3",
18 |     "bootstrap-vue": "^2.0.0",
19 |     "cross-env": "^5.2.0",
20 |     "express": "^4.16.4",
21 |     "express-validator": "^6.3.1",
22 |     "jsonwebtoken": "^8.5.1",
23 |     "mongoose": "^5.8.7",
24 |     "nuxt": "^2.0.0"
25 |   },
26 |   "devDependencies": {
27 |     "nodemon": "^1.18.9"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express')
 2 | const consola = require('consola')
 3 | const { Nuxt, Builder } = require('nuxt')
 4 | const app = express()
 5 | 
 6 | // Import and Set Nuxt.js options
 7 | const config = require('../nuxt.config.js')
 8 | config.dev = process.env.NODE_ENV !== 'production'
 9 | 
10 | async function start () {
11 |   // Init Nuxt.js
12 |   const nuxt = new Nuxt(config)
13 | 
14 |   const { host, port } = nuxt.options.server
15 | 
16 |   // Build only in dev mode
17 |   if (config.dev) {
18 |     const builder = new Builder(nuxt)
19 |     await builder.build()
20 |   } else {
21 |     await nuxt.ready()
22 |   }
23 | 
24 |   // Give nuxt middleware to express
25 |   app.use(nuxt.render)
26 | 
27 |   // Listen the server
28 |   app.listen(port, host)
29 |   consola.ready({
30 |     message: `Server listening on http://${host}:${port}`,
31 |     badge: true
32 |   })
33 | }
34 | start()
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nuxt-with-express
 2 | 
 3 | My Boilerplate CRUD project built with [**Express**](https://expressjs.com/) as server side language, [**NuxtJS**](https://nuxtjs.org/) as frontend framework and [**Mongodb**](https://www.mongodb.com/) as database server.
 4 | 
 5 | ## Features Implemented
 6 | 
 7 | 1. CRUD With Express API
 8 | 2. Form Validations using [**express-validator**](https://express-validator.github.io/docs/)
 9 | 3. Simple notifications for crud actions
10 | 4. Authentication using [**jwtwebtoken**](https://www.npmjs.com/package/jsonwebtoken) and [**@nuxtjs/auth**](https://auth.nuxtjs.org/) module.
11 | 
12 | 
13 | 
14 | ## Build Setup
15 | 
16 | ``` bash
17 | # install dependencies
18 | $ npm run install
19 | 
20 | # serve with hot reload at localhost:3000
21 | $ npm run dev
22 | 
23 | # build for production and launch server
24 | $ npm run build
25 | $ npm run start
26 | 
27 | # generate static project
28 | $ npm run generate
29 | ```
30 | 
31 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
32 | 


--------------------------------------------------------------------------------
/pages/articles/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="d-flex justify-content-between align-items-center">
 4 |       <h1>Articles</h1>
 5 |       <nuxt-link to="/articles/add" class="btn btn-success">Add New</nuxt-link>
 6 |     </div>
 7 |     <hr>
 8 | 
 9 |     <div class="alert alert-success"
10 |       v-if="$route.params.created=='yes'">Record added successfully</div>
11 |     <div class="alert alert-success"
12 |       v-if="$route.params.deleted=='yes'">Record deleted successfully</div>
13 | 
14 |     <div class="list-group"
15 |       v-if="articles.length">
16 |       <nuxt-link
17 |         class="list-group-item list-group-item-action"
18 |         :to="'/articles/' + article._id"
19 |         v-for="article in articles"
20 |         :key="article._id">
21 |         {{ article.title }}
22 |       </nuxt-link>
23 |     </div>
24 | 
25 |     <div class="alert alert-info"
26 |       v-else>
27 |       No records found.
28 |     </div>
29 |   </div>
30 | </template>
31 | 
32 | <script>
33 | export default {
34 |   async asyncData(context){
35 |     const {data} = await context.$axios.get('/api/articles')
36 |     return {
37 |       articles : data
38 |     }
39 |   },
40 | }
41 | </script>
42 | 


--------------------------------------------------------------------------------
/pages/articles/_id/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Article Details</h1>
 4 | 
 5 |     <hr>
 6 | 
 7 |     <div class="alert alert-success"
 8 |       v-if="$route.params.updated=='yes'">Record updated successfully</div>
 9 | 
10 |     <h2>{{ article.title }}</h2>
11 | 
12 |     <h6>By {{ article.author }}</h6>
13 | 
14 |     <p>{{ article.body }}</p>
15 | 
16 |     <hr>
17 |     <div class="d-flex justify-content-between">
18 |       <div>
19 |         <nuxt-link :to="'/articles/' + article._id + '/update'" class="btn btn-primary mr-3">Update</nuxt-link>
20 |         <button class="btn btn-danger" @click="deleteRecord()">Delete</button>
21 |       </div>
22 |       <nuxt-link to="/articles" class="btn btn-secondary mr-3">Back to Articles</nuxt-link>
23 |     </div>
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | export default {
29 |   middleware: 'auth',
30 | 
31 |   async asyncData(context){
32 |     const {data} = await context.$axios.get('/api/articles/' + context.route.params.id)
33 |     return {
34 |       article : data
35 |     }
36 |   },
37 | 
38 |   methods:{
39 |     deleteRecord(){
40 |       if(confirm("Are you sure?") === true){
41 |         this.$axios.delete('/api/articles/' + this.$route.params.id)
42 |           .then((response) => {
43 |             if(response.data._id){
44 |               this.$router.push({ name:'articles', params:{ deleted:'yes' } })
45 |             }
46 |           })
47 |           .catch( (error) => {
48 |             console.log(error);
49 |           });
50 |       }
51 |     }
52 |   }
53 | }
54 | </script>
55 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # Mac OSX
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/components/Logo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="VueToNuxtLogo">
 3 |     <div class="Triangle Triangle--two" />
 4 |     <div class="Triangle Triangle--one" />
 5 |     <div class="Triangle Triangle--three" />
 6 |     <div class="Triangle Triangle--four" />
 7 |   </div>
 8 | </template>
 9 | 
10 | <style>
11 | .VueToNuxtLogo {
12 |   display: inline-block;
13 |   animation: turn 2s linear forwards 1s;
14 |   transform: rotateX(180deg);
15 |   position: relative;
16 |   overflow: hidden;
17 |   height: 180px;
18 |   width: 245px;
19 | }
20 | 
21 | .Triangle {
22 |   position: absolute;
23 |   top: 0;
24 |   left: 0;
25 |   width: 0;
26 |   height: 0;
27 | }
28 | 
29 | .Triangle--one {
30 |   border-left: 105px solid transparent;
31 |   border-right: 105px solid transparent;
32 |   border-bottom: 180px solid #41b883;
33 | }
34 | 
35 | .Triangle--two {
36 |   top: 30px;
37 |   left: 35px;
38 |   animation: goright 0.5s linear forwards 3.5s;
39 |   border-left: 87.5px solid transparent;
40 |   border-right: 87.5px solid transparent;
41 |   border-bottom: 150px solid #3b8070;
42 | }
43 | 
44 | .Triangle--three {
45 |   top: 60px;
46 |   left: 35px;
47 |   animation: goright 0.5s linear forwards 3.5s;
48 |   border-left: 70px solid transparent;
49 |   border-right: 70px solid transparent;
50 |   border-bottom: 120px solid #35495e;
51 | }
52 | 
53 | .Triangle--four {
54 |   top: 120px;
55 |   left: 70px;
56 |   animation: godown 0.5s linear forwards 3s;
57 |   border-left: 35px solid transparent;
58 |   border-right: 35px solid transparent;
59 |   border-bottom: 60px solid #fff;
60 | }
61 | 
62 | @keyframes turn {
63 |   100% {
64 |     transform: rotateX(0deg);
65 |   }
66 | }
67 | 
68 | @keyframes godown {
69 |   100% {
70 |     top: 180px;
71 |   }
72 | }
73 | 
74 | @keyframes goright {
75 |   100% {
76 |     left: 70px;
77 |   }
78 | }
79 | </style>
80 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <nav class="navbar navbar-expand-md navbar-dark bg-dark">
 4 |       <nuxt-link to="/" class="navbar-brand">Express CRUD</nuxt-link>
 5 |       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
 6 |         <span class="navbar-toggler-icon"></span>
 7 |       </button>
 8 | 
 9 |       <div class="collapse navbar-collapse" id="navbarsExampleDefault">
10 |         <ul class="navbar-nav mr-auto">
11 |           <li class="nav-item">
12 |             <nuxt-link to="/" class="nav-link" exact-active-class="active">Home</nuxt-link>
13 |           </li>
14 |           <li class="nav-item">
15 |             <nuxt-link to="/articles" class="nav-link" exact-active-class="active">Articles</nuxt-link>
16 |           </li>
17 |         </ul>
18 | 
19 |         <ul class="navbar-nav"
20 |           v-if="!$auth.loggedIn">
21 |           <li class="nav-item">
22 |             <nuxt-link to="/user/register" class="nav-link" exact-active-class="active">Register</nuxt-link>
23 |           </li>
24 |           <li class="nav-item">
25 |             <nuxt-link to="/user/login" class="nav-link" exact-active-class="active">Login</nuxt-link>
26 |           </li>
27 |         </ul>
28 | 
29 |         <ul class="navbar-nav"
30 |           v-if="$auth.loggedIn">
31 |           <li class="nav-item">
32 |             <nuxt-link to="/user/my-account" class="nav-link" exact-active-class="active">My Account</nuxt-link>
33 |           </li>
34 |           <li class="nav-item">
35 |             <nuxt-link to="/user/logout" class="nav-link" exact-active-class="active">Logout</nuxt-link>
36 |           </li>
37 |         </ul>
38 |       </div>
39 |     </nav>
40 | 
41 |     <div class="container mt-4">
42 |       <nuxt />
43 |     </div>
44 |   </div>
45 | </template>
46 | 
47 | 


--------------------------------------------------------------------------------
/pages/user/login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Login</h1>
 4 |     <hr>
 5 | 
 6 |     <div class="alert alert-success"
 7 |       v-if="$route.params.registered=='yes'">You have registered successfully</div>
 8 | 
 9 |     <div class="row">
10 |       <div class="col-md-6">
11 |         <form action=""
12 |           method="post"
13 |           @submit.prevent="submitForm()">
14 | 
15 |           <div class="form-group">
16 |             <label for="">Email</label>
17 |             <input type="text" class="form-control"
18 |               :class="{ 'is-invalid': errors && errors.email }"
19 |               v-model="email">
20 |             <div class="invalid-feedback" v-if="errors && errors.email">
21 |               {{ errors.email.msg }}
22 |             </div>
23 |           </div>
24 | 
25 |           <div class="form-group">
26 |             <label for="">Password</label>
27 |             <input type="password" class="form-control"
28 |               :class="{ 'is-invalid': errors && errors.password }"
29 |               v-model="password">
30 |             <div class="invalid-feedback" v-if="errors && errors.password">
31 |               {{ errors.password.msg }}
32 |             </div>
33 |           </div>
34 | 
35 |           <div class="alert alert-danger"
36 |             v-if="login_error">{{ login_error }}</div>
37 | 
38 |           <input type="submit" value="Login" class="btn btn-primary mr-3">
39 |           <nuxt-link to="/" class="btn btn-secondary mr-3">Cancel</nuxt-link>
40 | 
41 |         </form>
42 |       </div>
43 |     </div>
44 |   </div>
45 | </template>
46 | 
47 | <script>
48 | export default {
49 |   middleware: 'auth',
50 |   auth: 'guest',
51 |   data(){
52 |     return{
53 |       errors:null,
54 |       login_error:null,
55 |       email:null,
56 |       password:null,
57 |       status:false,
58 |     }
59 |   },
60 | 
61 |   methods:{
62 |     submitForm(){
63 |       this.$auth.loginWith('local', {
64 |           data: {
65 |             email: this.email,
66 |             password: this.password
67 |           }
68 |         })
69 |         .catch( (error) => {
70 |           console.log(error)
71 |           if(error.response.data.message){
72 |             this.login_error = error.response.data.message
73 |           }
74 |         })
75 |     }
76 |   }
77 | }
78 | </script>
79 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | 
 2 | module.exports = {
 3 |   mode: 'universal',
 4 |   /*
 5 |   ** Headers of the page
 6 |   */
 7 |   head: {
 8 |     title: 'Express CRUD',
 9 |     meta: [
10 |       { charset: 'utf-8' },
11 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
12 |       { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
13 |     ],
14 |     link: [
15 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
16 |     ]
17 |   },
18 |   /*
19 |   ** Customize the progress-bar color
20 |   */
21 |   loading: { color: '#fff' },
22 |   /*
23 |   ** Global CSS
24 |   */
25 |   css: [
26 |   ],
27 |   /*
28 |   ** Plugins to load before mounting the App
29 |   */
30 |   plugins: [
31 |   ],
32 |   /*
33 |   ** Nuxt.js dev-modules
34 |   */
35 |   buildModules: [
36 |   ],
37 |   /*
38 |   ** Nuxt.js modules
39 |   */
40 |   modules: [
41 |     // Doc: https://bootstrap-vue.js.org
42 |     'bootstrap-vue/nuxt',
43 |     // Doc: https://axios.nuxtjs.org/usage
44 |     '@nuxtjs/axios',
45 |     '@nuxtjs/auth',
46 |   ],
47 | 
48 |   auth: {
49 |     strategies: {
50 |       local: {
51 |         endpoints: {
52 |           login: {
53 |             url: '/api/users/login',
54 |             method: 'post',
55 |             propertyName: 'token'
56 |           },
57 |           logout: true,
58 |           user: {
59 |             url: '/api/users/user',
60 |             method: 'get',
61 |             propertyName: 'user'
62 |           }
63 |         },
64 |         tokenRequired: true,
65 |         tokenType: "Bearer"
66 |       }
67 |     },
68 |     redirect: {
69 |       login: '/user/login', // User will be redirected to this path if login is required
70 |       logout: '/', // User will be redirected to this path if after logout, current route is protected
71 |       home: '/' // User will be redirect to this path after login if accessed login page directly
72 |     },
73 |     rewriteRedirects: true,
74 |   },
75 |   /*
76 |   ** Axios module configuration
77 |   ** See https://axios.nuxtjs.org/options
78 |   */
79 |   axios: {
80 |   },
81 |   /*
82 |   ** Build configuration
83 |   */
84 |   build: {
85 |     /*
86 |     ** You can extend webpack config here
87 |     */
88 |     extend (config, ctx) {
89 |     }
90 |   },
91 | 
92 |   serverMiddleware: [
93 |     '~/api/index.js'
94 |   ]
95 | }
96 | 


--------------------------------------------------------------------------------
/pages/articles/add.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Add New Article</h1>
 4 |     <hr>
 5 | 
 6 |     <div class="row">
 7 |       <div class="col-md-6">
 8 |         <form action=""
 9 |           method="post"
10 |           @submit.prevent="submitForm()">
11 | 
12 |           <div class="form-group">
13 |             <label for="">Title</label>
14 |             <input type="text" class="form-control"
15 |               :class="{ 'is-invalid': errors && errors.title }"
16 |               v-model="title">
17 |             <div class="invalid-feedback" v-if="errors && errors.title">
18 |               {{ errors.title.msg }}
19 |             </div>
20 |           </div>
21 | 
22 |           <div class="form-group">
23 |             <label for="">Author</label>
24 |             <input type="text" class="form-control"
25 |               :class="{ 'is-invalid': errors && errors.author }"
26 |               v-model="author">
27 |             <div class="invalid-feedback" v-if="errors && errors.author">
28 |               {{ errors.author.msg }}
29 |             </div>
30 |           </div>
31 | 
32 |           <div class="form-group">
33 |             <label for="">Body</label>
34 |             <textarea cols="30" rows="4" class="form-control"
35 |               :class="{ 'is-invalid': errors && errors.body }"
36 |               v-model="body"></textarea>
37 |             <div class="invalid-feedback" v-if="errors && errors.body">
38 |               {{ errors.body.msg }}
39 |             </div>
40 |           </div>
41 | 
42 |           <input type="submit" value="Submit" class="btn btn-primary mr-3">
43 |           <nuxt-link to="/articles" class="btn btn-secondary mr-3">Cancel</nuxt-link>
44 | 
45 |         </form>
46 |       </div>
47 |     </div>
48 |   </div>
49 | </template>
50 | 
51 | <script>
52 | export default {
53 |   middleware: 'auth',
54 | 
55 |   data(){
56 |     return{
57 |       errors:null,
58 |       title:null,
59 |       author:null,
60 |       body:null
61 |     }
62 |   },
63 | 
64 |   methods:{
65 |     submitForm(){
66 |       this.$axios.post( '/api/articles', {
67 |           title: this.title,
68 |           author: this.author,
69 |           body: this.body,
70 |         })
71 |         .then((response) => {
72 |           console.log(response)
73 | 
74 |           if(response.data._id){
75 |             this.$router.push({ name:'articles', params:{ created:'yes' } })
76 |           }
77 |         })
78 |         .catch( (error) => {
79 |           console.log(error)
80 |           if(error.response.data.errors){
81 |             this.errors = error.response.data.errors
82 |           }
83 |         });
84 |     }
85 |   }
86 | }
87 | </script>
88 | 


--------------------------------------------------------------------------------
/pages/user/register.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Register</h1>
 4 |     <hr>
 5 | 
 6 |     <div class="row">
 7 |       <div class="col-md-6">
 8 |         <form action=""
 9 |           method="post"
10 |           @submit.prevent="submitForm()">
11 | 
12 |           <div class="form-group">
13 |             <label for="">Full Name</label>
14 |             <input type="text" class="form-control"
15 |               :class="{ 'is-invalid': errors && errors.full_name }"
16 |               v-model="full_name">
17 |             <div class="invalid-feedback" v-if="errors && errors.full_name">
18 |               {{ errors.full_name.msg }}
19 |             </div>
20 |           </div>
21 | 
22 |           <div class="form-group">
23 |             <label for="">Email</label>
24 |             <input type="text" class="form-control"
25 |               :class="{ 'is-invalid': errors && errors.email }"
26 |               v-model="email">
27 |             <div class="invalid-feedback" v-if="errors && errors.email">
28 |               {{ errors.email.msg }}
29 |             </div>
30 |           </div>
31 | 
32 |           <div class="form-group">
33 |             <label for="">Password</label>
34 |             <input type="password" class="form-control"
35 |               :class="{ 'is-invalid': errors && errors.password }"
36 |               v-model="password">
37 |             <div class="invalid-feedback" v-if="errors && errors.password">
38 |               {{ errors.password.msg }}
39 |             </div>
40 |           </div>
41 | 
42 |           <input type="submit" value="Register" class="btn btn-primary mr-3">
43 |           <nuxt-link to="/" class="btn btn-secondary mr-3">Cancel</nuxt-link>
44 | 
45 |         </form>
46 |       </div>
47 |     </div>
48 |   </div>
49 | </template>
50 | 
51 | <script>
52 | export default {
53 |   middleware: 'auth',
54 |   auth: 'guest',
55 |   data(){
56 |     return{
57 |       errors:null,
58 |       full_name:null,
59 |       email:null,
60 |       password:null,
61 |       status:false,
62 |     }
63 |   },
64 | 
65 |   methods:{
66 |     submitForm(){
67 |       this.$axios.post( '/api/users/register', {
68 |           full_name: this.full_name,
69 |           email: this.email,
70 |           password: this.password,
71 |         })
72 |         .then((response) => {
73 |           console.log(response)
74 | 
75 |           if(response.data._id){
76 |             this.$router.push({ name:'user-login', params:{ registered:'yes' } })
77 |             // log in if successfully registered
78 |             this.$auth.loginWith('local', {
79 |                 data: {
80 |                   email: this.email,
81 |                   password: this.password
82 |                 }
83 |               })
84 |               .catch( (error) => {
85 |                 console.log(error)
86 |               })
87 |           }
88 |         })
89 |         .catch( (error) => {
90 |           console.log(error)
91 |           if(error.response.data.errors){
92 |             this.errors = error.response.data.errors
93 |           }
94 |         });
95 |     }
96 |   }
97 | }
98 | </script>
99 | 


--------------------------------------------------------------------------------
/pages/articles/_id/update.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <h1>Update Article</h1>
  4 |     <hr>
  5 | 
  6 |     <div class="row">
  7 |       <div class="col-md-6">
  8 |         <form action=""
  9 |           method="post"
 10 |           @submit.prevent="submitForm()">
 11 | 
 12 |           <div class="form-group">
 13 |             <label for="">Title</label>
 14 |             <input type="text" class="form-control"
 15 |               :class="{ 'is-invalid': errors && errors.title }"
 16 |               v-model="title">
 17 |             <div class="invalid-feedback" v-if="errors && errors.title">
 18 |               {{ errors.title.msg }}
 19 |             </div>
 20 |           </div>
 21 | 
 22 |           <div class="form-group">
 23 |             <label for="">Author</label>
 24 |             <input type="text" class="form-control"
 25 |               :class="{ 'is-invalid': errors && errors.author }"
 26 |               v-model="author">
 27 |             <div class="invalid-feedback" v-if="errors && errors.author">
 28 |               {{ errors.author.msg }}
 29 |             </div>
 30 |           </div>
 31 | 
 32 |           <div class="form-group">
 33 |             <label for="">Body</label>
 34 |             <textarea cols="30" rows="4" class="form-control"
 35 |               :class="{ 'is-invalid': errors && errors.body }"
 36 |               v-model="body"></textarea>
 37 |             <div class="invalid-feedback" v-if="errors && errors.body">
 38 |               {{ errors.body.msg }}
 39 |             </div>
 40 |           </div>
 41 | 
 42 |           <input type="submit" value="Submit" class="btn btn-primary mr-3">
 43 |           <nuxt-link :to="'/articles/' + $route.params.id" class="btn btn-secondary mr-3">Cancel</nuxt-link>
 44 | 
 45 |         </form>
 46 |       </div>
 47 |     </div>
 48 |   </div>
 49 | </template>
 50 | 
 51 | <script>
 52 | export default {
 53 |   middleware: 'auth',
 54 | 
 55 |   async asyncData(context){
 56 |     const {data} = await context.$axios.get('/api/articles/' + context.route.params.id)
 57 |     return {
 58 |       article : data
 59 |     }
 60 |   },
 61 | 
 62 |   data(){
 63 |     return{
 64 |       errors:null,
 65 |       title:null,
 66 |       author:null,
 67 |       body:null
 68 |     }
 69 |   },
 70 | 
 71 |   mounted(){
 72 |     this.fillFormData()
 73 |   },
 74 | 
 75 |   methods:{
 76 |     fillFormData(){
 77 |       this.title = this.article.title
 78 |       this.author = this.article.author
 79 |       this.body = this.article.body
 80 |     },
 81 | 
 82 |     submitForm(){
 83 |       this.$axios.put( '/api/articles/' + this.$route.params.id , {
 84 |           title: this.title,
 85 |           author: this.author,
 86 |           body: this.body,
 87 |         })
 88 |         .then((response) => {
 89 |           console.log(response)
 90 | 
 91 |           if(response.data._id){
 92 |             this.$router.push({ name:'articles-id', params:{ updated:'yes', id: this.$route.params.id } })
 93 |           }
 94 |         })
 95 |         .catch( (error) => {
 96 |           console.log(error)
 97 |           if(error.response.data.errors){
 98 |             this.errors = error.response.data.errors
 99 |           }
100 |         });
101 |     }
102 |   }
103 | }
104 | </script>
105 | 


--------------------------------------------------------------------------------
/api/controllers/usersController.js:
--------------------------------------------------------------------------------
  1 | const config = require('../config')
  2 | const User = require('../models/User')
  3 | const validator = require('express-validator')
  4 | const jwt = require('jsonwebtoken');
  5 | const bcrypt = require('bcryptjs')
  6 | 
  7 | 
  8 | // Register
  9 | module.exports.register = [
 10 |   // validations rules
 11 |   validator.body('full_name', 'Please enter Full Name').isLength({ min: 1 }),
 12 |   validator.body('email', 'Please enter Email').isLength({ min: 1 }),
 13 |   validator.body('email').custom(value => {
 14 |     return User.findOne({email:value}).then(user => {
 15 |       if (user !== null) {
 16 |         return Promise.reject('Email already in use');
 17 |       }
 18 |     })
 19 |   }),
 20 |   validator.body('password', 'Please enter Password').isLength({ min: 1 }),
 21 | 
 22 |   function(req, res) {
 23 |     // throw validation errors
 24 |     const errors = validator.validationResult(req);
 25 |     if (!errors.isEmpty()) {
 26 |       return res.status(422).json({ errors: errors.mapped() });
 27 |     }
 28 | 
 29 |     // initialize record
 30 |     var user = new User({
 31 |         full_name : req.body.full_name,
 32 |         email : req.body.email,
 33 |         password : req.body.password,
 34 |     })
 35 | 
 36 |     // encrypt password
 37 |     var salt = bcrypt.genSaltSync(10);
 38 |     var hash = bcrypt.hashSync(user.password, salt);
 39 |     user.password = hash
 40 | 
 41 |     // save record
 42 |     user.save(function(err, user){
 43 |         if(err) {
 44 |             return res.status(500).json({
 45 |                 message: 'Error saving record',
 46 |                 error: err
 47 |             });
 48 |         }
 49 |         return res.json({
 50 |             message: 'saved',
 51 |             _id: user._id
 52 |         });
 53 |     })
 54 |   }
 55 | ]
 56 | 
 57 | 
 58 | // Login
 59 | module.exports.login = [
 60 |   // validation rules
 61 |   validator.body('email', 'Please enter Email').isLength({ min: 1 }),
 62 |   validator.body('password', 'Please enter Password').isLength({ min: 1 }),
 63 | 
 64 |   function(req, res) {
 65 |     // throw validation errors
 66 |     const errors = validator.validationResult(req);
 67 |     if (!errors.isEmpty()) {
 68 |       return res.status(422).json({ errors: errors.mapped() });
 69 |     }
 70 | 
 71 |     // validate email and password are correct
 72 |     User.findOne({email: req.body.email}, function(err, user){
 73 |         if(err) {
 74 |             return res.status(500).json({
 75 |                 message: 'Error logging in',
 76 |                 error: err
 77 |             });
 78 |         }
 79 | 
 80 |         if (user === null) {
 81 |           return res.status(500).json({
 82 |             message: 'Email address you entered is not found.'
 83 |           });
 84 |         }
 85 | 
 86 |         // compare submitted password with password inside db
 87 |         return bcrypt.compare(req.body.password, user.password, function(err, isMatched) {
 88 |           if(isMatched===true){
 89 |             return res.json({
 90 |               user: {
 91 |                 _id: user._id,
 92 |                 email: user.email,
 93 |                 full_name: user.full_name
 94 |               },
 95 |               token: jwt.sign({_id: user._id, email: user.email, full_name: user.full_name}, config.authSecret) // generate JWT token here
 96 |             });
 97 |           }
 98 |           else{
 99 |             return res.status(500).json({
100 |               message: 'Invalid Email or Password entered.'
101 |             });
102 |           }
103 |         });
104 |     });
105 |   }
106 | ]
107 | 
108 | // Get User
109 | module.exports.user = function(req, res) {
110 |   var token = req.headers.authorization
111 |   if (token) {
112 |     // verifies secret and checks if the token is expired
113 |     jwt.verify(token.replace(/^Bearer\s/, ''), config.authSecret, function(err, decoded) {
114 |       if (err) {
115 |         return res.status(401).json({message: 'unauthorized'})
116 |       } else {
117 |         return res.json({ user: decoded })
118 |       }
119 |     });
120 |   }
121 |   else{
122 |     return res.status(401).json({message: 'unauthorized'})
123 |   }
124 | }
125 | 
126 | 
127 | 
128 | 


--------------------------------------------------------------------------------
/api/controllers/articlesController.js:
--------------------------------------------------------------------------------
  1 | const Article = require('../models/Article');
  2 | const validator = require('express-validator');
  3 | 
  4 | // Get all
  5 | module.exports.list = function (req, res, next) {
  6 |   Article.find({}, function(err, articles){
  7 |     if(err) {
  8 |         return res.status(500).json({
  9 |             message: 'Error getting records.'
 10 |         });
 11 |     }
 12 |     return res.json(articles);
 13 |   });
 14 | }
 15 | 
 16 | 
 17 | // Get one
 18 | module.exports.show = function(req, res) {
 19 |   var id = req.params.id;
 20 |   Article.findOne({_id: id}, function(err, article){
 21 |       if(err) {
 22 |           return res.status(500).json({
 23 |               message: 'Error getting record.'
 24 |           });
 25 |       }
 26 |       if(!article) {
 27 |           return res.status(404).json({
 28 |               message: 'No such record'
 29 |           });
 30 |       }
 31 |       return res.json(article);
 32 |   });
 33 | }
 34 | 
 35 | 
 36 | // Create
 37 | module.exports.create = [
 38 |   // validations rules
 39 |   validator.body('title', 'Please enter Article Title').isLength({ min: 1 }),
 40 |   validator.body('title').custom(value => {
 41 |     return Article.findOne({title:value}).then(article => {
 42 |       if (article !== null) {
 43 |         return Promise.reject('Title already in use');
 44 |       }
 45 |     })
 46 |   }),
 47 |   validator.body('author', 'Please enter Author Name').isLength({ min: 1 }),
 48 |   validator.body('body', 'Please enter Article Content').isLength({ min: 1 }),
 49 | 
 50 |   function(req, res) {
 51 |     // throw validation errors
 52 |     const errors = validator.validationResult(req);
 53 |     if (!errors.isEmpty()) {
 54 |       return res.status(422).json({ errors: errors.mapped() });
 55 |     }
 56 | 
 57 |     // initialize record
 58 |     var article = new Article({
 59 |         title : req.body.title,
 60 |         author : req.body.author,
 61 |         body : req.body.body,
 62 |     })
 63 | 
 64 |     // save record
 65 |     article.save(function(err, article){
 66 |         if(err) {
 67 |             return res.status(500).json({
 68 |                 message: 'Error saving record',
 69 |                 error: err
 70 |             });
 71 |         }
 72 |         return res.json({
 73 |             message: 'saved',
 74 |             _id: article._id
 75 |         });
 76 |     })
 77 |   }
 78 | ]
 79 | 
 80 | // Update
 81 | module.exports.update = [
 82 |   // validation rules
 83 |   validator.body('title', 'Please enter Article Title').isLength({ min: 1 }),
 84 |   validator.body('title').custom( (value, {req}) => {
 85 |     return Article.findOne({ title:value, _id:{ $ne: req.params.id } })
 86 |       .then( article => {
 87 |       if (article !== null) {
 88 |         return Promise.reject('Title already in use');
 89 |       }
 90 |     })
 91 |   }),
 92 |   validator.body('author', 'Please enter Author Name').isLength({ min: 1 }),
 93 |   validator.body('body', 'Please enter Article Content').isLength({ min: 1 }),
 94 | 
 95 |   function(req, res) {
 96 |     // throw validation errors
 97 |     const errors = validator.validationResult(req);
 98 |     if (!errors.isEmpty()) {
 99 |       return res.status(422).json({ errors: errors.mapped() });
100 |     }
101 | 
102 |     var id = req.params.id;
103 |     Article.findOne({_id: id}, function(err, article){
104 |         if(err) {
105 |             return res.status(500).json({
106 |                 message: 'Error saving record',
107 |                 error: err
108 |             });
109 |         }
110 |         if(!article) {
111 |             return res.status(404).json({
112 |                 message: 'No such record'
113 |             });
114 |         }
115 | 
116 |         // initialize record
117 |         article.title =  req.body.title ? req.body.title : article.title;
118 |         article.author =  req.body.author ? req.body.author : article.author;
119 |         article.body =  req.body.body ? req.body.body : article.body;
120 | 
121 |         // save record
122 |         article.save(function(err, article){
123 |             if(err) {
124 |                 return res.status(500).json({
125 |                     message: 'Error getting record.'
126 |                 });
127 |             }
128 |             if(!article) {
129 |                 return res.status(404).json({
130 |                     message: 'No such record'
131 |                 });
132 |             }
133 |             return res.json(article);
134 |         });
135 |     });
136 |   }
137 | 
138 | ]
139 | 
140 | 
141 | // Delete
142 | module.exports.delete = function(req, res) {
143 |   var id = req.params.id;
144 |   Article.findByIdAndRemove(id, function(err, article){
145 |       if(err) {
146 |           return res.status(500).json({
147 |               message: 'Error getting record.'
148 |           });
149 |       }
150 |       return res.json(article);
151 |   });
152 | }
153 | 


--------------------------------------------------------------------------------