xugy0926 / learn-webapp-guideline Goto Github PK

License: MIT License

learn-webapp-guideline's Introduction

介绍

该开发教程是基于Node/Express的WebApp教程，旨在让初学者快速学习开发一个前端和后端一体的WebApp。

本教程希望学习者有一些 JavaScript 的基础。教程中会涉及到很多新的概念和开发模块，对于初学者来说，理解上会很难。但是这都没有关系，初学者只需要按照教程一步一步的去做，就一定会做到最后的结果。达到结果后，再回过头去摸索教程中提到的所有概念。

祝学习愉快。

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
****新增代码开始****
  if (err.status === 500 && req.baseUrl.startsWith('/api')) {
    res.send(err);
    return;
  }
****新增代码结束****
  // render the error page
  res.status(err.status || 500);
****改动代码开始****
  // res.render('error');
  res.send(err);
****改动代码结束****
});

所以，该如何解决这个问题呢？

此外：
既然我们使用errorHandel去处理错误，为何不直接把res也传进来，遇到错误，直接返回响应？而不像案例中那样继续next将错误留给app中的处理错误的中间件处理。

从first-app-sample-20开始出现: Cannot read property 'toObject' of null

第6课，run auto-start 后rs 是指哪个键

Press rs for restarting the process.
rs应该就是指restart的缩写，但是电脑上好像没这个键啊。right shift 也不是。

ps.要是auto-start运行npm报错，看一下

"start": "node ./bin/www",
    "auto-start":

第一行最后逗号有没有漏

第25节，如图，{authUser}这样的写法是指authUser是一个属性吗？

ru't如图

第8课 local变量来自哪？

第八课中

express已经帮我们构建好了查找view的位置和解析view的引擎。当我们要返回页面时，只要告诉res.render函数返回的页面的名字即可。

res.render('index', { title: 'Express' });

在官网学习到res.render()可以添加三个参数: 字符串、一个对象（local variable）、一个callback函数。

我的问题是，上面代码中的title，和下面代码中的name，这种local variable是在哪定义的呢？

// pass a local variable to the view
res.render('user', { name: 'Tobi' }, function(err, html) {
  // ...
});

第7课，关于文件创建

1.mkdir/md可以用来直接创建文件夹，那么有没有哪个命令可以直接创建文件的。
比如，new 'hellojs.js'这样？

2.关于目录的命令不懂。根据上下文./指当前目录下，那么../是指上级目录吗？

document missing

document 2-2-project-description.md is empty.

Express : res.render(...,{...})时导入的数据怎么在一般js中使用。

view/post.ejs

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>cnode·Supported by Vue</title>
</head>

<body>
<% var postId = _id %>

<h1>_id : <%= _id %></h1>
<p>postId : <%= postId %></p>
<div id="app">
<h1>{{ detailData.content }}</h1>
<p>{{ post_id }}</p>

</div>
</body>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var postId = '12345654321';
var app = new Vue({
    el: "#app",
    data: {
      detailData : {
      	content:'zjutszl'
      },
      post_id:postId
    }
})
</script>

</html>

routes/post.js

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function (req, res, next) {
    res.render('post_detail', {_id:req.query.id});
});


module.exports = router;

页面显示

添加一行定义 [var postId = '12345654321']

修改后页面显示

为了阅读方便，先放了代码，图片在后面。

xugy0926 / learn-webapp-guideline Goto Github PK

learn-webapp-guideline's Introduction

介绍

目录

learn-webapp-guideline's People

Contributors

Stargazers

Watchers

Forkers

learn-webapp-guideline's Issues

view/post.ejs

routes/post.js

页面显示

添加一行定义 [var postId = '12345654321']

修改后页面显示

Recommend Projects

Recommend Topics

Recommend Org

Jobs