Git Product home page Git Product logo

jstraining's Introduction

全栈工程师培训材料,帮助学习者掌握 JavaScript 全栈开发的基本知识,承担简单 Web 应用的前后端开发。

一共四讲,适合两天的训练营。

学员要求

本培训不是零基础的,要求学员具备互联网开发的基本知识。

  • HTML
  • JavaScript
  • CSS
  • 命令行

以上技术,只要懂得基本语法和如何使用即可。

环境准备

参加培训之前,请按照文档安装软件,做好环境准备。

课堂练习

培训时,需要完成课堂练习

  1. 前端开发的历史演变
  2. 前端 MVC 框架的兴起
  3. 前后端分离
  4. 全栈工程师
  5. 前端开发的未来

第二讲:React 技术栈

  1. React 的基本用法
  2. React 应用的架构

第三讲:Node 应用开发

  1. Node 的基本用法
  2. Restful API
  3. Express 框架搭建 Web 应用

第四讲:前端工程简介

  1. 持续集成
  2. 静态代码检查
  3. 单元测试
  4. 功能测试
  5. 持续集成服务 Travis CI

License

GPL v3

jstraining's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jstraining's Issues

安装nightmare依赖出现问题

我使用Electron官网提供的安装方法:

$ npm install --save-dev electron

执行之后,安装停留在node install.js下,如下:
2017-10-13 7 22 29
ctrl + c退出后,运行:

$ node taobao.test.js

会抛出electron安装失败的错误:
2017-10-13 7 34 42
我在想是不是jstraining/demos/nightmare-demo/node_modules/electron/install.js这个文件的问题,可是我并不是很懂这个文件的描述的具体内容。
我很想知道问题出在哪里,所以过来寻求您的指点。非常感谢。

在课堂练习 MobX 一节执行 npm start 报错

代码是最新的
系统环境:macOS Sierra 10.12
nodejs: v7.5.0
npm: 4.1.2
删除 node_modules 重新执行 npm install 之后依然报错。
错误信息如下:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry should be one of these:
   object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
   The entry point(s) of the compilation.
   Details:
    * configuration.entry should be an object.
    * configuration.entry should be a string.
    * configuration.entry should NOT have duplicate items (items ## 1 and 2 are identical) ({
        "keyword": "uniqueItems",
        "dataPath": ".entry",
        "schemaPath": "#/definitions/common.nonEmptyArrayOfUniqueStringValues/uniqueItems",
        "params": {
          "i": 2,
          "j": 1
        },
        "message": "should NOT have duplicate items (items ## 1 and 2 are identical)",
        "schema": true,
        "parentSchema": {
          "items": {
            "minLength": 1,
            "type": "string"
          },
          "minItems": 1,
          "type": "array",
          "uniqueItems": true
        },
        "data": [
          "/Users/dennis/apps/jstraining/demos/mobx-demo/node_modules/webpack-dev-server/client/index.js?http://localhost:8080",
          "webpack/hot/dev-server",
          "webpack/hot/dev-server",
          "webpack-dev-server/client?http://localhost:8080",
          "/Users/dennis/apps/jstraining/demos/mobx-demo/app/main.jsx"
        ]
      }).
      [non-empty string]
    * configuration.entry should be an instance of function
      function returning an entry object or a promise..
 - configuration.resolve.extensions[0] should not be empty.

npm ERR! Darwin 16.0.0
npm ERR! argv "/Users/dennis/.nvm/versions/node/v7.5.0/bin/node" "/Users/dennis/.nvm/versions/node/v7.5.0/bin/npm" "start"
npm ERR! node v7.5.0
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `webpack-dev-server --devtool eval --progress --hot --content-base app`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'webpack-dev-server --devtool eval --progress --hot --content-base app'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the mobx-demo package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack-dev-server --devtool eval --progress --hot --content-base app
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs mobx-demo
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls mobx-demo
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/dennis/apps/jstraining/demos/mobx-demo/npm-debug.log

mocha-demo

文件 jstraining/demos/README.md

879行 "var add = require('./add.js');"

关于mocha-demo的部分

引入文件我在这里用"./add.js"会报错,提示无法找到"add.js";用"./add"测试才会正常通过。

请问为什么?

小微学院任务4

<title>renwu4</title> <style> .box{ width: 400px; height: 200px; background: gainsboro; position: absolute; top: 50%; left: 50%; overflow: hidden; margin-left: -200px; margin-top: -100px; } .circle1{ background:firebrick; width: 100px; height: 100px; border-radius: 50px; margin-left: -50px; margin-top: -50px; } .circle2{ background:firebrick; width: 100px; height: 100px; border-radius: 50px; margin-left: 350px; margin-top: 100px; } </style>

小微学院任务3

<title>ewnwu3</title> <style type="text/css"> .left{ float: left; } .right{float: right;} .mid{float: middle;} </style>
log

团队名称

log
log
log
log

孙悟空是《悟空传》中着墨最多的人物形象,然而他一出场就已经迷失了本性,在他的体内,自我灵魂与另外一颗灵魂相遇、碰撞,是成为别人心中畏惧却被自己遗忘的"齐天大圣",还是做一个神仙要求的保护唐僧平安西天取经的赎罪者,正如后现代社会下人们怀疑自己和他面对的世界一样,被抽去记忆后的孙悟空也一直怀疑自己所听到的关于自己的一切。《悟空传》将孙悟空分解为两个形象,一个是失忆的、迷茫的、只为加功德分而西游取经的孙悟空,一个是个性张扬、不拘束缚、备受妖界崇拜的齐天大圣。 唐僧

请教

我看您在HGAN-DTI下留言请问您运行成功了吗?

webpack版本问题导致demo无法正常运行

运行redux-demo时报错如下:


kxrr:redux-demo/ (master) $ npm start                                                                                                                                                             [17:36:32]

> [email protected] start /Users/kxrr/PycharmProject/jstraining/demos/redux-demo
> webpack-dev-server --devtool eval --progress --hot --content-base app

/Users/kxrr/PycharmProject/jstraining/demos/redux-demo/node_modules/.2.2.1@webpack/lib/webpack.js:19
		throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
		^

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry should be one of these:
   object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
   The entry point(s) of the compilation.
   Details:
    * configuration.entry should be an object.
    * configuration.entry should be a string.
    * configuration.entry should NOT have duplicate items (items ## 1 and 2 are identical) ({
        "keyword": "uniqueItems",
        "dataPath": ".entry",
        "schemaPath": "#/definitions/common.nonEmptyArrayOfUniqueStringValues/uniqueItems",
        "params": {
          "i": 2,
          "j": 1
        },
        "message": "should NOT have duplicate items (items ## 1 and 2 are identical)",
        "schema": true,
        "parentSchema": {
          "items": {
            "minLength": 1,
            "type": "string"
          },
          "minItems": 1,
          "type": "array",
          "uniqueItems": true
        },
        "data": [
          "/Users/kxrr/PycharmProject/jstraining/demos/redux-demo/node_modules/.1.16.3@webpack-dev-server/client/index.js?http://localhost:8080",
          "webpack/hot/dev-server",
          "webpack/hot/dev-server",
          "webpack-dev-server/client?http://localhost:8080",
          "/Users/kxrr/PycharmProject/jstraining/demos/redux-demo/app/main.jsx"
        ]
      }).
      [non-empty string]
    * configuration.entry should be an instance of function
      function returning an entry object or a promise..
 - configuration.resolve.extensions[0] should not be empty.
    at webpack (/Users/kxrr/PycharmProject/jstraining/demos/redux-demo/node_modules/.2.2.1@webpack/lib/webpack.js:19:9)
    at processOptions (/Users/kxrr/PycharmProject/jstraining/demos/redux-demo/node_modules/.1.16.3@webpack-dev-server/bin/webpack-dev-server.js:209:13)
    at Object.<anonymous> (/Users/kxrr/PycharmProject/jstraining/demos/redux-demo/node_modules/.1.16.3@webpack-dev-server/bin/webpack-dev-server.js:228:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)

npm ERR! Darwin 15.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.9.5
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `webpack-dev-server --devtool eval --progress --hot --content-base app`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'webpack-dev-server --devtool eval --progress --hot --content-base app'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the redux-demo package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack-dev-server --devtool eval --progress --hot --content-base app
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs redux-demo
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls redux-demo
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/kxrr/PycharmProject/jstraining/demos/redux-demo/npm-debug.log

应该是在配置中指定webpack版本为latest(目前为2.2.1)导致的, 尝试使用npm install [email protected] --save可以解决这个问题

Assertion failed: frame_header.payload_length == sizeof xfer_info, file src\win\pipe.c

mocha -t 15000 ./react/test.js

test app.html
Assertion failed: frame_header.payload_length == sizeof xfer_info, file src\win\pipe.c, line 1708e
src\win\pipe.c, line 1708
npm ERR! code ELIFECYCLE
Assertion failed: frame_header.payload_length == sizeof xfer_info, filsf x fer_info, file src\win\pipe.c, line 1708 npm ERR! code ELIFECYCLE above. npm ERR! errno 3221226505 0 ./react/test.jtional logging outputnpm ERR! [email protected] test-app: mocha -t 1500
Assertion failed: frame_header.payload_length == sizeof xfer_info, file src\win\pipe.c, line 1708xfer_info, file src\win\pipe.c, line 1708
npm ERR! code ELIFECYCLEnpm ERR! errno 3221226505 ./react/test.jsnpm ERR! [email protected] test-app: mocha -t 15000./react/test.js`
npm ERR! Exit status 3221226505 ipt.npm ERR! is likely additional logging output above.npm ERR! Failed at the [email protected] test-app script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

缴枪了老师,搞不定这个···nightmare的就抛这个

react-component-demo 在浏览器运行控制台报错

阮老师请问 为什么文件找不到?该如何解决
react.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
react-dom.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
babel.min.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

mobx-demo/redux-demo 无法运行

npm start 执行的时候抛出下面的错误信息,初学者,实在是看不明白

[email protected] start H:\Python\JS\jstraining\demos\mobx-demo
webpack-dev-server --devtool eval --progress --hot --content-base app
70% 1/1 build modulesevents.js:174
throw er; // Unhandled 'error' event
^

Error: listen EACCES: permission denied 127.0.0.1:8080
at Server.setupListenHandle [as _listen2] (net.js:1260:19)
at listenInCluster (net.js:1325:12)
at GetAddrInfoReqWrap.doListen [as callback] (net.js:1458:7)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:62:10)
Emitted 'error' event at:
at emitErrorNT (net.js:1304:8)
at process._tickCallback (internal/process/next_tick.js:63:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: webpack-dev-server --devtool eval --progress --hot --content-base app
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

使用postman发送请求时的问题

在按照demo中的文档进行REST API 实验时,有几个问题:
1. POST 请求中,如何让postID传递的是数字而不是字符串
我在key中填 postID ,value 中填 1,最后get到的数据会是 一个字符串。
2. delete 请求得到的结果与预期的会不一样。
在POST了多条数据后(postID不同),发送 DELETE 请求,删除的数据总是比我预期的多,那么这里的删除规则是什么?

新手求助

我在做mobx-demo时 npm install 后提示错误:

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "D:\Program Files\nodejs\node.exe" "D:\Program >Files\nodejs\node_modules\npm\bin
\npm-cli.js" "install"
npm ERR! node v4.4.7
npm ERR! npm v2.15.8
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDepend
encies requirements!
npm ERR! peerinvalid Peer [email protected] wants eslint-plugin-jsx-a11y@^2.2.3

npm ERR! Please include the following file with any support request:
npm ERR! mypath\demos\mobx-demo\npm-debug.log

mobx-demo 无法运行

阮老师,您好,我这边运行mobx-demo这个例子时候出现了以下问题,npm intsall后,[email protected]依赖无法安装报错:

npm WARN [email protected] requires a peer of eslint-plugin-jsx-a11y@^2.2.3 but none was installed.
npm WARN [email protected] requires a peer of eslint-plugin-import@^2.1.0 but none was installed.

目前这个问题已被解决,需要手动安装eslint-plugin-jsx-a11eslint-plugin-import且制定版本号:
npm install --save-dev eslint-plugin-jsx-a11y@^2.2.3 eslint-plugin-import@^2.1.0
之后再install就好了。intstall后显示:

npm WARN [email protected] No description
npm WARN [email protected] No repository field.

这时候去npm start没有报错且自动打开浏览器,但是无法访问,Chrome提示:localhost 网页无法正常运作,请问大概哪里出了问题?
node版本:v6.9.1,npm版本:3.10.8

backbone.js 代码没有格式化

jstraining/demos/backbone-demo/js/backbone.js

这个JS全是写在一起的,看代码很麻烦
后来知道了Atom,用Atom格式化了代码,
希望能更新一下。

limenghao

<meta http-equiv="content-type" content="text/html; charset="UTF-8" />

<link rel="stylesheet" href="./task2.css" />

<title>limenghao</title>
<header>

	<img src="./logo.png" alt="logo" width="100px" />

	<!--<h1>网站一级标题</h1>-->

	<nav>

	<ul class="navigation">

		<li><a href="">链接</a></li>

		<li><a href="">链接</a></li>

		<li><a href="">链接</a></li>

		<li><a href="">链接</a></li>

	</ul>

	</nav>

</header>

<article class="article1">

	<h2>文章一级标题</h2>

	<h2>文章二级标题</h2>

	<p>文章作者 文章发表时间</p>

	<p>

	6666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666,
	6666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666,
	666666666666666666666666666666666666666666666666666666666666666666666666666.
	<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>

	666666666666666666666666666666666666666666666666.

	<b>这里有个粗体字</b>

	66666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666.

	</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<p>66666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666,

	<b>这里有个粗体字</b>

	666666666666666666666666666666666666666666666666666,

	<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>

	66666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666,

</article>

<article class="article2">

	<h2>另一篇文章一级标题</h2>

	<h2>文章二级标题</h2>

	<p>文章作者 文章发表时间</p>

	<p>

	,666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666<br>

	66666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666<br>

	666666666666666666666666666666666666666666666666666,

	<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>

	,66666666666666666666666666666666666666666666666666,

	<b>这里有个粗体字</b>

	666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666.

	</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<ul class="list">

		<li>列表项目一</li>

		<li>列表项目二</li>

		<li>列表项目三</li>

	</ul>

</article>

<article class="article3">

	<h2>图片</h2>

	<p>好看的图片</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<p>好看的图片</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<p>好看的图片</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<p>好看的图片</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<p>好看的图片</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<p>好看的图片</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<p>好看的图片</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<p>好看的图片</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<p>好看的图片</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<p>好看的图片</p>

	<img src="./蔬菜.png" alt="shucai"/>

</article>

<article class="article4">

	<h2>最后一篇文章一级标题</h2>

	<h2>文章二级标题</h2>

	<p>文章作者 文章发表时间</p>

	<ol>

		<li>排名1</li>

		<li>排名2</li>

		<li>排名3</li>

	</ol>

	<p>下面是一个表格,给表格加了一个border="1"好让你看出是一个表格</p>

	<table border="1">

		<tr>

			<th>表头</th>

			<th>表头</th>

			<th>表头</th>

		</tr>

		<tr>

			<td>表内容单元格</td>

			<td>表内容单元格</td>

			<td>操作</td>

		</tr>

		<tr>

			<td>表内容单元格</td>

			<td>表内容单元格</td>

			<td>操作</td>

		</tr>

		<tr>

			<td>表内容单元格</td>

			<td>表内容单元格</td>

			<td>操作</td>

		</tr>

		<tr>

			<td>表内容单元格</td>

			<td>表内容单元格</td>

			<td>操作</td>

		</tr>

		<tr>

			<td>总计</td>

			<td colspan="2">1000</td>

		</tr>

	</table>

</article>

<div class="sidebar">

	<h2>这里以后是一个侧栏,这是侧栏的标题</h2>

	<h2>侧栏注册窗口标题</h2>

	<form name="sign" action="">

		<p>

			请输入邮箱地址:

			<input type="text" placeholder="这是一个文本输入框" name="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">

		</p>

		<p>邮箱地址请按要求格式输入</p>

		<p>

			请输入密码:

			<input type="text" placeholder="这是一个文本输入框" name="password" pattern="^([a-zA-Z\d]{6,16})$">

			请重复输入密码:

			<input type="text" placeholder="这是一个文本输入框" name="password2" pattern="^([a-zA-Z\d]{6,16})$">

		</p>

		<p>密码请为6-16位英文数字</p>

	</form>

	<form action="submit" name="info">

		性别:

		<input type="radio" name="sex" id="man">

		<label for="man">男</label>

		<input type="radio" name="sex" id="woman">

		<label for="woman">女</label>

		城市:

		<select name="country" id="">

			<option value="Beijing">北京</option>

			<option value="Shanghai">上海</option>

			<option value="Guangzhou">广州</option>

		</select>

		爱好:

		<input type="checkbox" name="checkbox1"/>运动

		<input type="checkbox" name="checkbox2"/>艺术

		<input type="checkbox" name="checkbox3"/>科学

		个人描述:

		<textarea name="discription" id="" cols="30" rows="5">这是一个多行输入框,输入您的个人描述</textarea>

		<button name="confirm" type="submit" name="info">确认提交</button>

	</form>

</div>

<footer>

	<p>版权所有&copy</p>

</footer>

Feedback

Python编程背景,花了一下午走完了所有流程。想问一下,有没有更深入和完整的例子参考?Thanks

请教闭包问题

老师:
如果内部函数没有引用外部函数作用域的变量,算是闭包吗
把内部函数从 匿名函数 换为 函数表达式 然后它还是闭包吗

limenghao

<meta http-equiv="content-type" content="text/html; charset="UTF-8" />

<link rel="stylesheet" href="./task2.css" />

<title>limenghao</title>
<header>

	<img src="./logo.png" alt="logo" width="100px" />

	<!--<h1>网站一级标题</h1>-->

	<nav>

	<ul class="navigation">

		<li><a href="">链接</a></li>

		<li><a href="">链接</a></li>

		<li><a href="">链接</a></li>

		<li><a href="">链接</a></li>

	</ul>

	</nav>

</header>

<article class="article1">

	<h2>文章一级标题</h2>

	<h2>文章二级标题</h2>

	<p>文章作者 文章发表时间</p>

	<p>

	6666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666,
	6666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666,
	666666666666666666666666666666666666666666666666666666666666666666666666666.
	<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>

	666666666666666666666666666666666666666666666666.

	<b>这里有个粗体字</b>

	66666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666.

	</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<p>66666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666,

	<b>这里有个粗体字</b>

	666666666666666666666666666666666666666666666666666,

	<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>

	66666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666,

</article>

<article class="article2">

	<h2>另一篇文章一级标题</h2>

	<h2>文章二级标题</h2>

	<p>文章作者 文章发表时间</p>

	<p>

	,666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666<br>

	66666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666<br>

	666666666666666666666666666666666666666666666666666,

	<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>

	,66666666666666666666666666666666666666666666666666,

	<b>这里有个粗体字</b>

	666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666.

	</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<ul class="list">

		<li>列表项目一</li>

		<li>列表项目二</li>

		<li>列表项目三</li>

	</ul>

</article>

<article class="article3">

	<h2>图片</h2>

	<p>好看的图片</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<p>好看的图片</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<p>好看的图片</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<p>好看的图片</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<p>好看的图片</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<p>好看的图片</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<p>好看的图片</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<p>好看的图片</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<p>好看的图片</p>

	<img src="./蔬菜.png" alt="shucai"/>

	<p>好看的图片</p>

	<img src="./蔬菜.png" alt="shucai"/>

</article>

<article class="article4">

	<h2>最后一篇文章一级标题</h2>

	<h2>文章二级标题</h2>

	<p>文章作者 文章发表时间</p>

	<ol>

		<li>排名1</li>

		<li>排名2</li>

		<li>排名3</li>

	</ol>

	<p>下面是一个表格,给表格加了一个border="1"好让你看出是一个表格</p>

	<table border="1">

		<tr>

			<th>表头</th>

			<th>表头</th>

			<th>表头</th>

		</tr>

		<tr>

			<td>表内容单元格</td>

			<td>表内容单元格</td>

			<td>操作</td>

		</tr>

		<tr>

			<td>表内容单元格</td>

			<td>表内容单元格</td>

			<td>操作</td>

		</tr>

		<tr>

			<td>表内容单元格</td>

			<td>表内容单元格</td>

			<td>操作</td>

		</tr>

		<tr>

			<td>表内容单元格</td>

			<td>表内容单元格</td>

			<td>操作</td>

		</tr>

		<tr>

			<td>总计</td>

			<td colspan="2">1000</td>

		</tr>

	</table>

</article>

<div class="sidebar">

	<h2>这里以后是一个侧栏,这是侧栏的标题</h2>

	<h2>侧栏注册窗口标题</h2>

	<form name="sign" action="">

		<p>

			请输入邮箱地址:

			<input type="text" placeholder="这是一个文本输入框" name="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">

		</p>

		<p>邮箱地址请按要求格式输入</p>

		<p>

			请输入密码:

			<input type="text" placeholder="这是一个文本输入框" name="password" pattern="^([a-zA-Z\d]{6,16})$">

			请重复输入密码:

			<input type="text" placeholder="这是一个文本输入框" name="password2" pattern="^([a-zA-Z\d]{6,16})$">

		</p>

		<p>密码请为6-16位英文数字</p>

	</form>

	<form action="submit" name="info">

		性别:

		<input type="radio" name="sex" id="man">

		<label for="man">男</label>

		<input type="radio" name="sex" id="woman">

		<label for="woman">女</label>

		城市:

		<select name="country" id="">

			<option value="Beijing">北京</option>

			<option value="Shanghai">上海</option>

			<option value="Guangzhou">广州</option>

		</select>

		爱好:

		<input type="checkbox" name="checkbox1"/>运动

		<input type="checkbox" name="checkbox2"/>艺术

		<input type="checkbox" name="checkbox3"/>科学

		个人描述:

		<textarea name="discription" id="" cols="30" rows="5">这是一个多行输入框,输入您的个人描述</textarea>

		<button name="confirm" type="submit" name="info">确认提交</button>

	</form>

</div>

<footer>

	<p>版权所有&copy</p>

</footer>

关于函数式编程

阮老师你好,希望您能出一个函数式编程的教程。目前自学的过程有些痛苦。还有reacte native适合函数式编程来开发么?

关于未来只有两种工程师这种说法有个疑问?

在第一讲最后一节中,提到

未来只有两种软件工程师

端工程师
手机端
PC 端
TV 端
VR 端
……
云工程师

这里有个疑问? 那么写golang高并发的工程师,写java处理业务的工程师, 写内核虚拟化的工程师,或者写db数据库的工程师应该归到哪一类呢?

按照文中的分类,前端必然不属于。 后端? 貌似也不属于。因为可能不会与UI,数据库进行交互。

PC、TV、VR也不沾边。

云工程师? 范围有点太广。内核虚拟化和云无关,但要实现云,虚拟化有是一个非常好的选择。 所以看到这里,迷茫了!

实操项目simple-app-demo中的npm run build导致失败的原因

正在学习阮老师的Demo,在实操simple-app-demo过程中出现了报错,

ERROR in multi ./app.js bundle.js
Module not found: Error: Can't resolve 'bundle.js' in '/Applications/MAMP/htdocs/simple-app-demo'
 @ multi ./app.js bundle.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack app.js bundle.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

其原因是因为npm默认安装 webpack 4.x的问题,解决方案有两种:
1.首先卸载掉webpack 4.x版本,安装webpack3.x版本,例如:

npm uninstall webpack -g //卸载最新版本
npm install [email protected] -g //安装3.10.0版本

再次进行simple-app-demo练习,即可成功生成bundle.js等

2.参照这篇文章配置webpack 4.x版本进行simple-app-demo的练习.

File missing

There isn't a file named bundle.js in jstraining/demos/mobx-demo/app/.
But jstraining/demos/mobx-demo/app/index.html shows:

<script type="text/javascript" src="bundle.js"></script>

xiaoweirenwu3

<title>ewnwu3</title> <style type="text/css"> .left{ float: left; } .right{float: right;} .mid{float: middle;} </style>
log

团队名称

log
log
log
log

孙悟空是《悟空传》中着墨最多的人物形象,然而他一出场就已经迷失了本性,在他的体内,自我灵魂与另外一颗灵魂相遇、碰撞,是成为别人心中畏惧却被自己遗忘的"齐天大圣",还是做一个神仙要求的保护唐僧平安西天取经的赎罪者,正如后现代社会下人们怀疑自己和他面对的世界一样,被抽去记忆后的孙悟空也一直怀疑自己所听到的关于自己的一切。《悟空传》将孙悟空分解为两个形象,一个是失忆的、迷茫的、只为加功德分而西游取经的孙悟空,一个是个性张扬、不拘束缚、备受妖界崇拜的齐天大圣。 唐僧

git commit 出错

阮老师您好,我在自己的分支上修改完想 commit 的时候 node 报错,查了一下相关的问题还是不清楚应该怎么解决,想请教一下您,打扰了。
目前进度:刚完成 react 的部分,其中两个需要 npm install 的练习都已完成
报错信息:

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "lint"
npm ERR! node v7.2.1
npm ERR! npm  v3.10.10

npm ERR! missing script: lint
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

我看到有其他 issue 也是类似的 比如 issue
可是我没弄懂这个 lint 的 script 该加到哪里去,是哪一个 package.json 文件?而其内容又需要怎么写呢?
比如我尝试修改 /usr/local/lib/node_modules/npm 下的 package.json 文件,不过有点一脸懵逼=。=

"scripts": {
    "lint": "eslint *.js",  #此处是我修改的,但似乎没有效果
    "dumpconf": "env | grep npm | sort | uniq",
    "prepublish": "node bin/npm-cli.js prune --prefix=. --no-global && rimraf test/*/*/node_modules && make doc-clean && make -j4 doc",
    "preversion": "bash scripts/update-authors.sh && git add AUTHORS && git commit -m \"update AUTHORS\" || true",
    "tap": "tap --timeout 300",
    "tap-cover": "tap --coverage --timeout 600",
    "test": "standard && npm run test-tap",
    "test-coverage": "npm run tap-cover -- \"test/tap/*.js\" \"test/network/*.js\" \"test/slow/*.js\" \"test/broken-under-*/*.js\"",
    "test-tap": "npm run tap -- \"test/tap/*.js\" \"test/network/*.js\" \"test/slow/*.js\" \"test/broken-under-*/*.js\"",
    "test-node": "\"$NODE\" \"node_modules/.bin/tap\" --timeout 240 \"test/tap/*.js\" \"test/network/*.js\" \"test/slow/*.js\" \"test/broken-under-nyc*/*.js\""
  },
  "license": "Artistic-2.0"
}

参考了一下 npm 那边的 issue 反而更加疑惑了:jstraning 本身下面是空的,为何又会导致这样的问题呢
我是在 jstraning 目录下 git commit 的,然而这个文件夹下本身是没有 npm 相关的东西吧,至少我跑 npm run 和 npm start 时输出是

# npm run
Lifecycle scripts included in monster:
  test
    echo "Error: no test specified" && exit 1

# npm start 
npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v7.2.1
npm ERR! npm  v3.10.10

npm ERR! missing script: start

所以终极困惑还是,为什么此处无法成功 git commit (:з」∠)

Nightmare一节执行node test出错

系统版本:win10 64;
node版本:v6.6.0;
npm版本:v3.10.8;

项目模块钟已安装mocha,未全局安装
describe('test index.html', function() {
^ReferenceError: describe is not defined

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.