Awesome

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

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.
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

Clone this project
Install the node environment
In the project root directory, execute the following command to install the dependencies:

# install dependencies
npm install

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/'
});

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