My previous blog was hexo, but later I decided to try using Vue plus Node to create a blog with a background, so I got this blog. The project address

W-Blog

W-blog is a small Blog based on VUE and Node using Vue front-end and egg.js back-end

Quick start

Technology stack

  • Front end:
    • Client: vue, iview
    • Admin end: vue, d2admin, Element
  • Back-end: egg.js, mongodb

features

  • Lightweight Markdown editor for uploading pictures to seven cows
  • Support label, classification, search draft box and other functions
  • A tag cloud

Online address

Huang’s brother’s blog

Images demonstrate

The front desk

  • Home page to browse
  • Article details and table of contents navigation
  • Articles can be searched by category and tag
  • Enter keyword search
  • Tag cloud and search

The background

  • The background login
  • The article lists
  • The article search
  • The article editor
  • Increase the classification
  • labeling
  • Label modification (same classification)
  • The article changes
  • Articles deleted, support trash draft box

The directory structure

│.autod.conf.js │.eslintignore │.eslintrc │.gitignore │ Travis. Yml │ app.js Yml │ package.json │ readme. md │ ├─app │ ├─ Router. Js // │ │ ├─ Controller │ admin Background relevant controller │ │ client. Js/controller/front desk related │ │ login. Js / / login controller │ │ page. The js / / page relevant controller │ │ │ ├─extend │ │ Help.js │ │ ├─ Middleware │ │ │ ├─ Model │ Article // │ │ ├─public │ │ ├─admin │ │ ├─dist // After packaging generated directory │ │ │ └ ─ SRC / / admin side source file │ │ │ │ │ └ ─ client / / client │ │ ├ ─ dist/directory after/packaging generates │ │ └ ─ SRC / / client source file │ │ │ └ ─ service │ ├─config │ config.defaulttest├ ─app ├ ─controller home.test.jsCopy the code

Global configuration

module.exports = appInfo= > {
  return {
    keys: appInfo.name + '_1432030565447_3632'.mongoose: {
      clients: {
        blog: {
          url: 'mongo: / / 127.0.0.1 / blog'.options: {
            user: 'test'.// User name of the database
            pass: 'test' // Database password}}}},// Initialize the administrator information
    user: {
      userName: 'admin'.password: 'admin',},session: {
      maxAge: 3600 * 1000,},jwt: {
      cert: 'jsonwebtoken' / / JWT secret key
    },
    /** * The markdown editor uploads images using the markdown store * so you need to configure the markdown key */
    qiniu: { // Enter your Access Key and Secret Key here
      ak: ' '.sk: ' '}}};Copy the code

Run locally

Install the MongoDB database and Node.js environment.

Install server dependencies
npm install
# open mongo
mongod --dbpath 'Directory of your database' # --auth if password is enabled, add this command
# run service
npm run dev

Enter the foreground directory
cd ./app/public/client/src
Install foreground dependencies
npm install
Run the foreground project
npm run dev

Go to the background directory
cd ./app/public/admin/src
Install background dependencies
npm install
Run the background project
npm run dev

# It can be accessed at http://127.0.0.1:8080
The development phase is accessed directly through WebPack's DevServer
ProxyTable can be configured under config
Copy the code

packaging

# In foreground and background directories respectively
npm run build
In the project root directory
npm install --production
# start
npm start
You can pass the package
# http://127.0.0.1:7001/ and http://127.0.0.1:7001/admin to access the foreground and background
Copy the code