Giter VIP home page Giter VIP logo

jueblog-combat's Introduction

jueblog-combat

“仿稀土倔金”博客系统,新书《前端开发实战派》的项目实战源码。

  • 前端技术栈:Vue3 + Pinia + TypeScript
  • 后端技术栈:Express + MongoDB + Serverless

快速掌握 JavaScript 全栈开发能力,成为独立开发者。

能学到什么

能学到的前端知识包括:

  • Vue3 组合式 API 综合应用。
  • Element Plus 框架的使用。
  • Axios 全局请求、登录验证、响应拦截、错误处理等。
  • Pinia 全局状态管理应用。
  • Vue Router 的页面路由设计。
  • Marndown 编辑器开发。
  • TypeScript 的深度集成。

能学到的后端知识包括:

  • Node.js 服务端基础。
  • Express 搭建 API 基础。
  • 路由、请求、响应、中间件等。
  • 数据库 MongoDB 的增查改删以及高级查询。
  • 基于 mongoose 的数据库文档设计以及验证。
  • 基于 jwt 的接口权限验证。
  • 用户相关的登录验证、加密验证。
  • 全局错误处理,状态码响应。

购买纸质书

开发本项目需要的技术基础+实战详细介绍全在这本书里,如有需要请点击购买;欢迎加作者微信咨询。

    

启动项目

将项目下载到本地,然后按照以下步骤运行。

(1)全局安装 pm2

$ yarn global add pm2

pm2 是流行的 Node.js 进程管理器,安装后使用 pm2 命令管理项目。

(2)安装项目依赖

$ yarn

(3)启动项目

$ yarn run server

此命令执行后,项目前端与后端会同时启动,并支持修改自动更新。可以用 pm2 ls 命令查看启动结果:

如果想查看日志,使用 pm2 logs <id> 命令。如:

$ pm2 logs 1

1|jueblog- | API 启动,监听 9000 端口
1|jueblog- | API 启动,监听 9000 端口
...

配置数据库和请求地址

在 server 目录下找到 config.example.json 文件,修改文件中的三个属性:

  • mongo_url:MongoDB 连接地址。
  • mongo_username:MongoDB 用户名。
  • mongo_password:MongoDB 密码。

修改后将文件重命名为 config.json,配置即可生效。

没有这一步操作,项目启动无法连接数据库。

前端请求的 API 接口根 URL,需要通过环境变量来配置。在根目录下的找到 .env.local.example 文件,这里定义了开发环境下的 API 地址:

VITE_API_BASEURL=http://localhost:9000

同样将该文件重命名为 .env.local,配置即可生效。

当 API 部署到线上后,需要将这里的 http://localhost:9000 更换为线上地址。

jueblog-combat's People

Contributors

ruidoc avatar puxiao avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.