总纲
此项目分前端与后台两部分 前端为ag-cli 后端为lowdb
- cd backend
- npm install
- node app
在localhost:5000 查看json
- cd frontend
- npm install
- ng serve
在localhost:4200 查看项目
backend
注意事项
- 需要用最新的lowdb 新版与旧版的语法完全不同 而且会报错
- 需要掌握json-server lowdb lodash语法
frontend
创建命令
- ng new frontend
- cd frontend
- ng serve
安装ngx-bootstrap
- # version 3.x
- npm install ngx-bootstrap bootstrap --save
-
- # .angular-cli.json 就这一行 记得重启服务器生效
- "styles": [
- "../node_modules/bootstrap/dist/css/bootstrap.min.css","styles.css"
- ],#开始测试
-
- # src/app/app.module.ts
- import { AlertModule } from 'ngx-bootstrap';
- ...
-
- @NgModule({
- ...
- imports: [AlertModule.forRoot(),... ],...
- })
-
- # app.component.html
- <alert type="success">hello</alert>
注意:更改.angular-cli.json后 需要重启 ng serve
目录结构规划
ag的模块划分 基本有两种构想
一种是一个页面算一个模块 页面内再划分组件 因为就是一级结构 所以路由十分简单 其他公共组件调取share文件夹
另一种是以功能块为一个模块 如 将文章列表 文章详情 和他们的module service 放到一起 好处是路由清晰 封装后适合一个人开发一整块 不好的地方在于层层嵌套
我将采用第一种模块方式 理由是结构清晰 路由简约 功能单一
此项目的文件夹规则为:
各个子导航 以页面为单位 各占一个文件夹 每个页面有自己的share文件夹 里面是自有component和route
share文件夹 下属 pipe component config models services layout
user单独一个文件夹
auth一个文件夹