Vue.js Node.js ssr Koa server-side-rendering blog axios pm2 qiniu iview
Need help with Blog-Frontend-Project?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
LennonChin

Description

Web frontend code for my blogs, develop with Vue.

206 Stars 77 Forks Apache License 2.0 291 Commits 6 Opened issues

Services available

Need anything else?

Front and back end of the separation of the blog project - front-end project

Supported SSR Now.

Blog has been online ,welcome to browse:https://blog.coderap.com/

中文版说明

The warehouse holds the front end code for the blog project, built using Vue.js.

Note 1: The current Master branch has begun data interworking with the backend. The full version of the test data can be viewed in this version: 6a10ff2

Note 2: The backend code repository linked with this repository is linked here BlogBackendProject and the backend code is implemented using Django + Xadmin + Django Rest Framework.

Front effect display

PC Platform

Home Page

Article Page

Article List Page

Timeline

Mobile Platform

Mobile effect

The overall technology stack

Achieved basic functions

Has now developed 17 pages, basically meet the needs of conventional blog. The page is as follows:

  • Homepage, Routing
    /
  • Article Home, Routing
    /artices
  • Gallery Homepage, Routing
    /albums
  • Movie Homepage, routing
    /movies
  • Reading Homepage, routing
    /readings
  • Article List page, route
    /articles/category/:id
  • Album list page, route
    /albums/category/:id
  • Movie list page, route
    /movies/category/:id
  • Reading list page, route
    /readings/category/:id
  • Book list page, route
    /books/category/:id
  • Book note list page, route
    /book/notes/category/:id
  • Article details page, route
    /article/:id
  • Album browsing page, routing
    /album/:id
  • Movie details page, route
    /movie/:id
  • Book details page, route
    /book/:id
  • Book note details page, route
    /book/note/:id
  • Timeline page, route
    /timeline

At present, the development of ordinary pages basically completed the development, the need for the next test to verify the details and Bug; article details page has achieved code highlighting, catalogs, reviews and other functions.

Note: ~~The code highlighting

Highlight.js
plug-in, and in order to reduce the packaging volume customize the plug-in JS package, custom plug-ins stored in
./src/common/js/highlight.pack.js
, if you need other highlights please Custom plug-ins, custom tutorials here~~. Now I removed highlight.js, replaced by using Pygments at backend, to improved render effect at frontend.

The next will be achieved

  • [x] Will consider implementing SSR server rendering. ~~Due to the current backend Django Rest Framework, SSR support may be postponed. SSR support for some necessary pages is developing now.~~SSR can already work now.
  • [ ] Access GitHub, WeChat, Weibo, Facebook and other third-party login comments.
  • [x] front-end page Markdown editor access Qiniu Cloud Storage to store pictures. (Completed)
  • [ ] Optimize the details of the gallery display.
  • [ ] Optimize packaging volume.

How to use

  1. Clone this project
  2. Install the node environment
  3. In the project root directory, execute the following command to install the dependencies:
# install dependencies
npm install
  1. Next, you need to do some backend support for the project configuration:

Note: You can choose to browse the offline version: 6a10ff2, this version is not complete, but shows the most basic page, all the data are local test data.

The backend of this project uses Django + Xadmin + Django Rest Framework. The code repository is located at BlogBackendProject. You need to configure it online according to the repository code. After configuring, please refer to the

./src/api/client-api.js
and
./src/api/client-api.js
files in this project your interface configurations of both client environment and SSR environment, my configurations as follows:
// client-api.js
const request = axios.create({
  baseURL: process.env.NODE_ENV === 'development' ? 'https://localhost:8000/api/' : 'https://blog.coderap.com/api/'
});

// server-api.js const request = axios.create({ baseURL: process.env.NODE_ENV === 'development' ? 'https://localhost:8000/api/' : 'http://localhost/api/' });

  1. After the above configuration is completed, run the following command to enter the development environment:
# serve with hot reload at localhost: 9999
npm run dev

Or run the following command to package:

# build for production with minification
npm run build

License

Apache-2.0

Copyright (c) 2016-present, LennonChin

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.