After trying to write a lightweight and minimalist blog content manager (CMS) on WordPress, I finally finished it before the summer semester started.

Well, actually what I want to accomplish is:
  • A basic blog content manager function, such as background login, publish and manage articles, etc
  • You can manage links to blog pages
  • Support markdown syntax online editing
  • Blog pages are optimized for mobile
  • User-defined theme and account modifications (incomplete)
  • Page enough atmosphere, cool hey

So, in keeping with the usual cool, I wrote a starry theme backstage…

Landing page



login.gif

Background Management Page



console.png

But the blog page ended up not having a starry night theme in the background, mainly because black wasn’t a good match. So I think, since the front end is written with vue.js, then join Chao test xi vue.js especially yuxi blog style bar! In order to keep it not the same as Yudada’s blog (yudada changed his blog recently), I added my own canvas animation on this basis, which should be elegant enough. Therefore, my blog page:




blog.gif

The Demo here, login background button at the bottom of the page “webmaster login”, you can log in the background system as a tourist.

The source code is here

Technology and implementation ideas:

Front end: Vue family barrel
  • Vue.js
  • Vue-Cli
  • Vue-Resource
  • Vue-Validator
  • Vue-Router
  • Vuex
  • Vue-loader
The back-end
  • Node.js
  • mongoDB (mongoose)
  • Express
Tools and Languages
Overall idea:
  • The Node server does not render templates except for the home page, leaving rendering to the browser
  • The Node server does not perform any route switching, which is done by vue-Router
  • The Node server is only used to receive requests, query the database, and return values

So this is almost completely decoupled from the front and back ends, as long as the restful style of data interface and data access format is agreed, it is OK. On the back end, I use mongoDB to do database, and operate mongoDB through Mongoose in Express, eliminating the complex command line. Working with Javascript is definitely a lot easier.

Upper file directory



Paste_Image.png

I unified the front-end part in the SRC directory, and all pages were divided into a single Vue component, which was placed in the Component. Through the entry file mian. Js, the generated file was packaged by Webpack and placed in the public folder. The back-end files are placed in the Server folder, which is essentially an Express-based server, and executed in the Server folder

node wwwCopy the code

Start the Node server, listening on port 3000 by default

Webpack.config.js

The webPack configuration file is based on vue-CLI and I made only a few minor changes. React.js doesn’t use scaffolding like vue-cli. It’s simple and elegant.

var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './public'), publicPath: '/public/', filename: 'build.js', }, resolveLoader: { root: path.join(__dirname, 'node_modules'), }, module: { loaders: [ { test: /\.vue$/, loader: 'vue' }, { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, { test: /\.json$/, loader: 'json' }, { test: /\.html$/, loader: 'vue-html' }, { test: /\.(png|jpg|gif|svg)$/, loader: 'url', query: { limit: 10000, name: '[name].[ext]?[hash]' } } , { test: /\.(woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=50000&name=[path][name].[ext]' } ] }, babel: { presets: ['es2015'], }, devServer: { historyApiFallback: true, noInfo: true }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([  new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ output: { comments: false, }, compress: { warnings: false } }), new webpack.optimize.OccurenceOrderPlugin() ]) }Copy the code

You can see that you have helped us to automatically refresh the browser, hot load and production environment code compression is written, it is very considerate. However, in the actual project, I still encountered a troublesome problem. Here is the script in package.json

"scripts": {
    "dev": "webpack-dev-server --inline --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "watch": "webpack --progress --color --watch",
    "server": "supervisor ./server/www"
  },Copy the code
npm run devCopy the code

After that, the browser opens a server on port 8080. However, this server is used to serve the front-end page. In other words, starting the server from here instead of starting the Node server will cause the data cannot be exchanged. This port, however, automatically refreshes the browser after a file is modified.

Then, by executing separately

npm run watch
npm run serverCopy the code

To listen for file changes and restart the Node server, at which point the browser will not automatically refresh. I tried a few things but it didn’t work out. Used to automatic browser refresh, this kind of situation is quite painful. At least you don’t have to restart the Node server yourself with the Supervisor.

The compromise is to use a server with port 8080 when changing styles, and manually refresh a browser with port 3000 when changing data interactions. So the slow compilation speed completed the development.

After writing this blog manager, I feel quite a lot, I have a deeper understanding of the data binding, componentization and data flow in vue.js, and I have an elegant practice of the Node.js backend.

School is coming soon, if you have time, IN this article, I will write a few important Vue components analysis, at the same time dare to share the use of Vue. Js family bucket between the experience…

I don’t want to go to school