README.md · 暗影灰蝶/SchoolHome

# SchoolHome

毕业后回来逛的网站

## 使用的框架

### express

>http://www.expressjs.com.cn/4x/api.html

### node.js

>http://nodejs.cn/

### bootstrap3

>http://v3.bootcss.com/

### jquery

>http://www.w3school.com.cn/jquery/ (非官网，官网在国外，比较卡)

### mysql

>https://github.com/redblaze/node-mysql  使用方法请参照这里

## 开发环境搭建

* 安装`node.js`（官网如上的述）
* 安装`vscode`[官网](https://code.visualstudio.com/)
* 安装`mysql`，请自行去网上下载安装

## 项目结构

项目目录在SchoolHome下面的shome中。

``` bash
├─bin                 运行目录，这个目录里面的www文件是程序的运行入口
├─node_modules        npm依赖的第三方库，通过`npm install`安装的库和插件都在这里
├─public              这里面放置了css,js,image,font等前端文件，引用的时候直接`/public下面的文件夹名称`开头即可访问到静态文件
│  ├─font             字体文件
│  ├─images           图片
│  ├─javascripts      js文件
│  └─stylesheets      css文件
├─routes              路由。来自前端的请求都会根据这个文件中定义的路径被处理，然后转向交由views中的某一个视图文件来处理
└─views               视图。这里的每一个文件都被routes中的路由调用，然后被转换成为前台的html页面，在用户的浏览器中展示
└─app.js              应用程序主文件，里面定义了使用哪些路径和插件。
└─package.json        定义项目的信息，通过`npm install`安装的插件会在这个文件里面登记。
```

## 程序运行逻辑（逻辑上的流程，而非真正的流程）

* 用户请求`http://localhost:3000/index`
* 请求到达`app.js`中，在`app.js`中，只有如下的路由注册代码

``` js
var index = require('./routes/index');
var users = require('./routes/users');
....
app.use('/', index);
app.use('/users', users);
```

由于请求的地址是`/index`，所以与`/users`不符，但是，可以被`/`匹配到前缀，所以，使用第一句代码注册的路由。由于第一句代码注册的路由是`index`，而`index`实例化的时候对应的是`./routes/index`，所以，请求被转移至`./routes/index`.js文件中.

* `./routes/index.js`文件接手处理请求。它有如下的代码

``` js
/* GET home page.1 */
router.get('/', function(req, res, next) {
  res.render('index', { title: '项目名称' });
});
/* GET home page.2 */
router.get('/index', function(req, res, next) {
  res.render('index', { title: '项目名称' });
});
/* GET login page. */
router.get('/login', function(req, res, next) {
  res.render('login', { title: '登陆系统' });
});
```
其中，`router.get('/', function(re`和`router.get('/index', `都与`/index`前缀匹配，所以，使用优先使用所有符合匹配的规则中最长的规则，即`/index`(`GET home page.2`)。

* `GET home page.2`的`render`指向了`index`视图，并且带了一个对象作为参数传过去，即`{ title: '项目名称' }`，那么，就由`views`中的`index.js`接手继续处理这个请求。
* `views`中的`index.js`是一个半html页面，它的特点是可以通过`<%= title %>`来打印由路由传过来的对象的`title`的属性的值（即`项目名称`）。

暗影灰蝶/SchoolHome

简介

发行版

贡献者

近期动态

暗影灰蝶/SchoolHome .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

暗影灰蝶/SchoolHome