大きなフロントエンド関連 - Nodejs から vue へ
I.はじめに
現在、フロントエンドとバックエンドが分離されていると言われていますが、フロントエンドにも魔法のような技術がたくさんあり、バックエンドにしかできないこともフロントエンドでもできる（例えば、データベース）。いくつかの小規模なシステムに直面しても、フロントエンド エンジニアはシステム全体を扱うことができます。以前学んだjspは実用性がないようです。ここでは、Node.js をエントリ ポイントとして使用して、単純に大きなフロント エンドについて学習します。
2、vscodeのインストール
1.インストール
vscode をダウンロードするには、公式 Web サイトに直接アクセスしてください。 vscode 公式
Web サイト
Baidu 百科事典:
Visual Studio Code (「VS Code」と呼ばれる) は、2015 年 4 月 30 日の Build Developers Conference で Microsoft が Mac OS X、Windows 上で動作することを公式に発表しました。および Linux: デスクトップ上で実行され、Windows、macOS、および Linux で使用できる、最新の Web およびクラウド アプリを作成するためのクロスプラットフォームのソース コード エディターです。JavaScript、TypeScript、Node.js のサポートが組み込まれており、他の言語 (C++、C#、Java、Python、PHP、Go など) およびランタイム (.NET など) の拡張機能の豊富なエコシステムがあります。とユニティ）。
2. vscodeの簡単な操作
CTRL+P 搜索(配置/...)
>Configure Display Language 切换语言配置 在搜索中输入(后面一样)
>font 字体大小等设置
或者：
文件-->首选项-->设置-->font 大概中间有关font size 直接调整
文件-->首选项-->设置-->emment 打开TAB自动补齐(默认打开)
！ ！自动生成基本html格式
3.Node.js
1.インストール
自分のコンピュータにインストールするには、公式 Web サイトからダウンロードする必要があります。公式 Web サイトの
愚かなスタイルのインストール、環境変数の自動構成、および npm の統合が可能になりました。
2. テストインストールは成功しました
cmd ターミナルに直接入力します。
node -v 查看版本号---测试是否安装成功
npm -v 查看包管理器版本(npm包管理器，后面说)
多くのインストールでは、-v または -version を使用してバージョンを表示し、インストールが成功したかどうかを確認できます。
3. 使いやすい
vscoe を使用して新しい httpserver.js ファイルを作成する - Web ページの応答
//导入模块是require就类似于import java.io
const http=require("http");
//1.创建一个httpserver服务
http.createServer(function(request,response){
//浏览器怎么认识hello server!!
//下面这行告诉浏览器将以text-plain(文本)去解析hello server这段数据
response.writeHead(200,{
'Content-type':'text/html'});//text/html是html格式(即<strong>会翻译成标签)
//给浏览器输出内容
//2.监听一端口8888
response.end("<strong>hello server!</strong>");
}).listen(8888)
console.log("你启动的服务是:http://localhost:8888已启动成功");
//3.启动服务 终端输入node httpserver.js
//4.在浏览器访问http://localhost:8888
4. フロントエンド接続データベース
ターミナル入力: nmp install mysql —— nodejs の mysql 操作モジュールをインストールします
。 インストール後、node_modules、package-lock.json、package.json の 3 つのファイルが表示されます。
新しい db.js ファイルを作成します
//导入mysql依赖包，mysql属于第三方的模块就类似于java.sal
var mysql=require("mysql");
//1.创建一个mysql的Connection对象
//2.配置数据连接的信息
var connection=mysql.createConnection({
host:"127.0.0.1",
user:"root",
port:3306,
password:"root",
database:"testdb"//连接testdb数据库
});
//3.开辟连接
connection.connect();
//4.执行curd
connection.query("select * from _user",function(error,results,fields){
//如果查询出错，直接抛出
if(error)throw error;
//查询成功（网页打开console查看数据）
console.log("results = ",results);
});
//5.关闭连接
connection.end();
//最后一步：运行node db.js查看效果
4、ES6 構文
1. ES6とは何ですか
html を書く前に、jsp var などはすべて ECMAScript5 の構文ですが、idea を使用して書いたことがある場合、idea では常に var を let または const に置き換える必要があることがわかります。ECMAScript6 は大規模なフロントエンドには必須です。ここで学習について簡単に紹介します。
Baidu Encyclopedia:
ECMAScript 6 (略称 ES6) は、2015 年 6 月に正式にリリースされた JavaScript 言語標準で、正式名称は ECMAScript 2015 (ES2015) です。その目標は、JavaScript 言語を使用して複雑な大規模アプリケーションを記述し、エンタープライズ レベルの開発言語となることです。
さらに、場合によっては、ES6 は ES2015 以降の新機能を指すこともありますが、それ以降のバージョンは ES7、ES8 などと呼ばれます。
2. let と const
コードには <body> 部分のみがあり、! を使用してください。自動生成されたテンプレート
<script>
//传统定义变量和常量的方式 统一使用var
var name="张三";
var link="https://www.baidu.com";
var PI=Math.PI;
console.log(name);
console.log(link);
console.log(PI);
//ES6定义方式
let name2="李四";
let link2="https://www.baidu.com";
//定义常量
const PI2=Math.PI;
console.log(name2);
console.log(link2);
console.log(PI2);
</script>
<script>
//let 和const解决var的变量穿透问题，和常量修改的问题
for(var i=0;i<5;i++){
console.log(i);
}
//变量穿透,输出5，let会报错
console.log(i);
//var定义常量可以被修改，const定义的常量修改会报错
var PI=Math.PI;
PI=100;
console.log(PI);
//在实际开发和生产中，如果是小程序，unipp或者是一些脚手架中，可以大胆的去使用let和const
//但是如果在web开发中，建议还是使用var，因为在一些低版本的浏览器还是不支持let和const
</script>
3. テンプレート文字列
<script>
//字符串会牵涉到动态部分
var person={
name:"张三",
address:"天津码头",
target:"福记商铺"
}
let address="传统的--我是"+person.name+"，在"+person.address+"抬货到"+person.target;
console.log(address);
//ES6的模板字符串语法
let address2=`ES6--我是${
person.name}，在${
person.address}抬货到${
person.target}`;
console.log(address2);
</script>
4. 関数のデフォルトパラメータ
<script>
//函数默认参数
function sum(a,b){
return a+b;
}
var result=sum(100,200); //300
var result=sum(100); //NaN ---sum(100,undefined);
console.log("result = "+result);
//但是可以在定义函数给默认值解决这个问题
function sum2(a=100,b=200){
return a+b;
}
var result=sum2(400); //600
console.log("result = "+result);
</script>
5. アロー関数
<script>
//箭头函数 - 重点(在未来的项目开发中：比如小程序，unipp，一些常见的脚手架大量使用)
//原来函数
var sum=function(a,b){
return a+b;
}
//箭头函数改进--1
var sum2 = (a,b)=>{
return a+b;
}
//箭头函数改进--2
var sum3= (a,b)=>a+b;
console.log(sum(100,200));
console.log(sum2(100,200));
console.log(sum3(100,200));
//通过上面的列子找到的规律
//1：去掉function
//2.在括号后面加箭头
//3.如果逻辑代码中仅有return可以直接省去。(如果有逻辑体，就不能省略)
//4.如果参数只有一个，括号也可以省去（自然多个参数必须加括号）
var sum4 = (a,b) =>{
var num=a+b;
return num;//不能省略
}
//var sum5 = (a,b)=>a+b;
//例子
var arr=[1,2,3,4,5,6];
var arrNew=arr.map(function(obj){
return obj*2;
});
console.log(arrNew);
//箭头函数简化
var arrNew2=arr.map(obj=>obj*2);
console.log("箭头函数简化数组乘二："+arrNew2);
</script>
6. オブジェクトの初期化の省略表現とケース分析
<script>
//原本
var info={
title:"天津狗不理",
goods:"包子",
go:function(){
console.log("卖包子");
}
};
console.log("原本对象"+info);
//es6简写
//对象是key:value
//如果key和变量名一致，可以只定义一次
//如果value是一个函数，可以把`:function`去掉，只剩下()即可
var title="天津狗不理";
var goods="包子";
let info2={
title,
goods,
go(){
console.log("卖包子");
}
};
console.log("ES6简写对象:"+info2);
console.log("ES6简写对象:"+info2.title);
console.log("ES6简写对象:"+info2.goods);
console.log("ES6简写对象:"+info2.go());//这里会先执行info2.go()，下一行返回ES6简写对象:undefined
</script>
例：
<form action="">
<p>账号：<input type="text" id="account"></p>
<p>密码：<input type="text" id="password"></p>
<p><input type="button" value="登录" id="loginbtn"></p>
</form>
<script>
$("#loginbtn").onclick(function(){
var account=$("#account").val();
var password=$("#password").val();
//执行异步请求
// $.ajax({
// type:"post",
// url:"xxx",
// data:{account:account,password:password},
// success:function(){
// }
// });
//简写
var params={
account,password};
$.ajax({
type:"post",
url:"xxx",
data:params,
success(){
}
});
});
</script>
7. オブジェクトの分解
<script>
//对象key:value存在,获取对象属性和方法的方式有两种
//1.通过.
//2.通过[]
var title="天津狗不理";
var goods="包子";
let info2={
title,
goods,
go(){
console.log("卖包子");
}
};
console.log("通过.方式--------------------");
//通过.
console.log(info2.title);
console.log(info2.goods);
info2.go();
console.log("通过[]方式-----------------");
//通过[]的方式
console.log(info2["title"]);
console.log(info2["goods"]);
info2["go"]();
console.log("ES6获取属性和方法的方式-----------------");
//ES6获取属性和方法的方式(es6对象解构--其实就是快速获取属性和方法的一种形式)
var {
title,goods,go}=info2;
//还原代码
// var title=info2.title;
// var goods=info2.goods;
console.log(title,goods);
go();
</script>
8. オブジェクトスプレッド演算子
<script>
//对象传播操作符...
var person={
name:"张三",
address:"天津码头",
evetnt:"抬杠",
nickname:"钢三",
go(){
console.log("抬杠抬到力能扛鼎");
}
};
//解构
var {
name,address,...person2}=person;
console.log(name);
console.log(address);
console.log(person2);
</script>
<script>
//java----后台
//数据格式: var userPage={pages:10,user:[{},{}],pageNo:1,pageSize:100,total:100};
//异步请求
//$.post("/user/search",funtion(res){
var userPage={
pages:10,user:[{
},{
}],pageNo:1,pageSize:100,total:100};
var {
users,...userPage2}=userPage;
// })
</script>
9. 配列マップ
<script>
//要对arr数组每个数组*2
let arr=[1,2,3,4,5,6,7];
//传统方式
let newarr=[];
for(let i=0;i<arr.length;i++){
newarr.push(arr[i]*2);
}
console.log(newarr);
//map
let newArr2=arr.map(ele=>ele*2);
console.log("map实现数组*2:"+newArr2);
//map处理对象的数据
var user=[{
age:10,name:"珂赛特"},{
age:10,name:"洛丽塔"},{
age:18,name:"吉普赛"}];
let newUser=user.map(function(ele){
ele.age +=1;
return ele;
});
// let newUser=user.map(ele=>ele.age += 1);//这个只返回年龄
console.log(newUser);
</script>
10. 配列の縮小
<script>
let arr=[1,2,3,4,5,6,7,8,9,10];
let result=arr.reduce((a,b)=>a+b);
console.log("result:"+result);
//原理：a=1 b=2 result=3
//a=3 b=3 result=6
//....
//a=45 b=10 result=55
</script>
11.nodejs と <\script>
新しい 01.js ファイルを作成し、上記のコードを取得して、
//字符串会牵涉到动态部分
var person={
name:"张三",
address:"天津码头",
target:"福记商铺"
}
let address="传统的--我是"+person.name+"，在"+person.address+"抬货到"+person.target;
console.log(address);
//ES6的模板字符串语法
let address2=`ES6--我是${
person.name}，在${
person.address}抬货到${
person.target}`;
console.log(address2);
ターミナルで実行します:
node .\01.js
結果は同じです
。html の <script> の構文関数は、nodejs で直接使用できます。
5.npm
1 はじめに
Npm はバックエンドの Maven NPM と同等です
: Node Package Manager
なので、対応するウェアハウスもあります: 公式 Web サイト
https://www.npmjs.com/で直接検索してください。
2.機能
1. Nodejs プロジェクトを迅速に構築します。
2. サードパーティ モジュールを迅速にインストールして依存します。例: npm install mysql redis など。
3. プロジェクトを初期化する
终端运行：>npm init 初始化
名称默认回车
版本：可以自己指定eg:1.0.1
描述：我是一个node工程
入口函数：默认index.js回车就行
测试命名---不需要回车就行
仓库地址(git repository)---如果不需要回车就行
关键词 自定义node
作者 自定义person
回车确认
package.json ファイルを取得します。その内容は次のとおりです。
{
"name": "3npmpro", //工程名
"version": "1.0.1", //版本
"description": "我是一个node工程", //描述
"main": "index.js", //入口js
"scripts": { //运行脚本
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"node"
],
"author": "person", //开发者
"license": "ISC" //授权协议
}
pom.xml ファイルと同様に、管理の役割は
私たちに依存しており、テスト時にターミナルに直接 npm init -y を入力してデフォルトで初期化することもできます。
4. モジュールのインストールとアンインストールの概要
サードパーティ製モジュールをすばやくインストールして依存する
ターミナル:
npm init -y 全部默认参数完成初始化(生成package.json)
npm install mysql (node_modules和package-lock.json)(mysql在node_modules下的mysql)
npm i redis (redis也在在node_modules下)
高速インストールはサードパーティのモジュールに依存しますか?
npm install xxx または npm i xxx モジュール名
インストールモジュールはプロジェクトのnode_moudulesフォルダーに配置されます。
モジュールを使用します。
- require
//导入模块redis
const redis = require("redis");
//导入mysql
const mysql=require("mysql");
xx.js ファイル:
//导入模块redis
const redis = require("redis");
//导入mysql
const mysql=require("mysql");
const client =redis.createClient();
client.on("error",function(error){
console.error(error);
});
client.set("key","value",redis.print);
client.get("key",redis.print);
モジュールをアンインストールします。
npm uninstall vue jquery
5.package.jsonファイル
package.json ファイル:
"dependencies": {
"mysql": "^2.18.1",
"redis": "^3.1.2"
}
npm install xxx を通じてダウンロードされた依存関係は、package.json ファイルに記録されます。これは、
Maven の pom.xml レコードの役割に似ています: 再利用
新しいプロジェクトを作成する場合は、package.json ファイルを新しいディレクトリにコピーできます次に、現在のディレクトリで cmd を開き、「npm install」と入力して、package.json に記録されているすべての構成をダウンロードします。
6.cnpm
Mavenと同様に倉庫が海外にあり、国内のダウンロードは遅いです。
国内の淘宝網ミラー cnpm: を使用して、
以下をインストールできます。
npm install -g cnpm --registry=https://registry.npm.taabao.org
cnpm -v cnmp バージョン情報の表示
6-2 cnpmのインストール時にエラーが発生しました
次のエラーが発生した場合:
C:\Users\Lenovo\AppData\Roaming\npm\cnpm.ps1 これは、このシステムではスクリプトの実行が禁止されているためです。
解決：
1.在win10 系统中搜索框 输入 Windows PowerShell，选择 管理员身份运行
2.使用，win+R打开了powershell命令行之后,输入set-ExecutionPolicy RemoteSigned，
然后更改权限为A，最后通过 get-ExecutionPolicy 查看当前的状态
总结:powershell打开后输入：set-ExecutionPolicy RemoteSigned 回车;A 回车;get-ExecutionPolicy 回车。
シックス、バベル
1. 概要と機能
機能: es 設定を変更するために使用されます (多くのブラウザー設定は十分な高さではありません。es6 を es5 にトランスコードするために使用できます)
2.インストール
cmd ターミナル入力:
cnpm install -g babel-cli 安装(-cli默认安装到c盘)
babel --version 查看版本
3.使用する
新しいフォルダーを作成し、ターミナル入力:
npm init -y 初期化
新しいファイルを作成します /src/example.js (トランスコードするファイル)
//es6
let name = "张三";
const address = "西安";
let arr=[1,2,3,4,5];
let newArr=arr.map(a=>a*2);
console.log(name);
console.log(address);
console.log(newArr);
ルート ディレクトリに .babelrc ファイルを作成します (babel 構成 – 変換するバージョン – ここでは es2015)
{
"presets":["es2015"],
"plugins": []
}
ターミナルは以下を実行します:
バベルsrc -d dist
通常、エラーは次の場所で発生します。
es2015がインストールされていないため、ディレクトリ「E:\XXX\XXX\5babel」に関連するプリセット「es2015」が見つかりませんでした
ターミナルは以下を実行します:
cnpm install babel-preset-es2015 --save-dev が
表示されます。node_modules ファイル
再度変換を実行します:
babel src -d dist
(dist/example.js (es2015 バージョン) が表示されます) (src 下のファイルを dist ファイルにトランスコードします)
トランスコード後の js ファイル:
"use strict";//使用严格模式，严格模式下你不能使用未声明的变量。
//es6
var name = "张三";
var address = "西安";
var arr = [1, 2, 3, 4, 5];
var newArr = arr.map(function (a) {
return a * 2;
});
console.log(name);
console.log(address);
console.log(newArr);
ps: 新しいプロジェクトをインストールすると、package.json が新しいフォルダーにコピーされ、npm install が実行されます。
4. カスタムスクリプト
カスタム スクリプトについて簡単に説明します。カスタム スクリプトがあるため、インターネットからプロジェクトをダウンロードした後、通常はターミナルに npm run dev と入力してプロジェクトを実行します。
package.json ファイルにスクリプトを追加します:
ソース ファイル:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
変更後:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"babel src -d dist"
},
ターミナルの実行:
npm run dev が
自動的に実行されます。
7. モジュール化
1 はじめに
フロントエンドは複雑化が進んでおり、Javaパッケージ（インポート）のような仕組みやモジュール化仕様も作られています。ここでは、CommonJS モジュラー仕様と ES6 モジュラー仕様について説明します。
2. CommonJS モジュール仕様
エクスポートファイル:
//工具类
const sum = ((a,b)=>a+b);
const sub = ((a,b)=>a-b);
const mul = ((a,b)=>a*b);
const di = ((a,b)=>a/b);
//如何导出给别人使用
module.exports={
sum,
sub,
mul,
di
}
インポート テスト (Java のインポート クラスに似ており、インポート後に直接使用できます):
//require
const m=require('./四则运算.js');
console.log(m.sum(4,2));
console.log(m.sub(4,2));
console.log(m.mul(4,2));
console.log(m.di(4,2));
3. ES6モジュラー仕様（共通）
新しいファイル src/userApi.js (エクスポート ファイル) を作成します。
export function getList(){
//在真实业务中，异步获取数据
console.log("获取数据列表");
}
export function save(){
//在真实业务中，异步获取数据
console.log("保存数据");
}
新しいファイル src/userTest.js を作成します (テスト ファイルをインポートします)。
import {
getList,save} from './userApi.js'
getList();
save();
//默认不支持es6语法
userTestを実行してエラーが報告された場合
<!-- import {getList,save} from './userApi.js'
^^^^^^
SyntaxError: Cannot use import statement outside a module -->
//默认不支持es6语法
解決：
npm init -y 先初始化
新建.babelrc文件 转码配置
cnpm install babel-preset-es2015 --save-dev 安装es2015依赖
在package.json文件新建脚本
"build":"babel src -d dist"
终端:npm run build
node .\dist\userTest.js 成功运行
4. es6の一般的な書き方（3の改良版）
新しいファイル src/userApi.js (エクスポート ファイル) を作成します。
export default{
getList(){
//在真实业务中，异步获取数据
console.log("获取数据列表");
},
save(){
//在真实业务中，异步获取数据
console.log("保存数据");
}
}
新しいファイル src/userTest.js を作成します (テスト ファイルをインポートします)。
import user from './userApi.js'
user.getList();
user.save();
8.ウェブパック
1 はじめに
Webpack は、さまざまな静的リソース js、css などを、コンテンツを表示するための静的ファイルに変換できるモジュール パッケージャーです。
2.インストール
cnpm install -g webpack webpack-cli
webpack -v 查看版本
3. js パッケージングの手順をテストする
テスト: src/ フォルダー内 - main.js は util.js および common.js ファイルをインポートします
1 "nodejs プロジェクトを作成します。 npm init -y
2" src ディレクトリを作成します
3" src にマージする必要がある 2 つの util.js を保存しますおよび common.js
util.js ファイル:
//相加函数
exports.add=(a,b)=> a+b;
//动态增加的相减函数
exports.minus=(a,b)=> a-b;
common.js ファイル:
//输出例子
exports.info=function(str){
console.log(str);
document.write(str);
}
4》エントリーファイル main.js を準備します。実際には、モジュールは
main.js ファイルをインポートするために集中しています。
//导入util和common
const util =require("./util");
const common =require("./common");
common.info("Hello World ,"+util.add(100,100));
document.write("<br />")
common.info("Hello World ,"+util.minus(100,50));
5 "ルート ディレクトリに webpack.config.js ファイルを定義して、パッケージ化ルールを構成します
//导入path模块"path"是nodejs的内置模块
const {
dirname } = require("path");
const path=require("path");
//定义JS打包的规则
module.exports={
//入口函数：从哪里开始进行编译打包
entry:"./src/main.js",
//编译成功以后把内容输出到哪里去
output:{
//定义输出指定目录 __dirname当前目录根目录，产生一个dist文件
path:path.resolve(__dirname,"./dist"),
//定义合并的文件名
filename:"bundle.js"
}
}
6" webpack を実行して効果を表示します。
ターミナル入力:
webpack 打包开始
webpack -w 动态监视打包
4. CSS パッケージ化のテスト
Webpack の古いバージョン自体は、デフォルトで JavaScript モジュールのみを処理できます。他の種類のファイルを処理したい場合は、ローダーを使用して変換する必要があります。ディレクトリに style.css ファイルを作成します。
body{
background: yellow;
}
1》最初に関連するローダープラグインをインストールします
cnpm install --save-dev style-loader css-loader
2》webpack.config.jsで設定する
//导入path模块"path"是nodejs的内置模块
const {
dirname } = require("path");
const path=require("path");
//定义JS打包的规则
module.exports={
//入口函数：从哪里开始进行编译打包
entry:"./src/main.js",
//编译成功以后把内容输出到哪里去
output:{
//定义输出指定目录 __dirname当前目录根目录，产生一个dist文件
path:path.resolve(__dirname,"./dist"),
//定义合并的文件名
filename:"bundle.js"
},
module:{
rules:[{
test:/\.css$/, //把项目中所有的.css结尾的文件打包
use:["style-loader","css-loader"]
}]
}
}
3》メインにCSSをインポート
require("./style.css");
4" Webpack を実行する
九、ビュー要素管理者
紹介 (公式):
vue-element-admin は、vue と element-ui に基づくバックエンド フロントエンド ソリューションです。最新のフロントエンド テクノロジー スタック、組み込みの i18n 国際化ソリューション、動的ルーティング、権限検証を使用し、典型的なビジネス モデルを洗練し、豊富な機能コンポーネントを提供するため、エンタープライズ レベルのミッドバックグラウンド製品のプロトタイプを迅速に構築できます。あなたのニーズが何であれ、このプロジェクトがあなたのお役に立てると信じています。
ソースコードのダウンロード:ソースコードのアドレス
プレビュー:プレビューのアドレス
vue については後ほど別記事で書きますので、ぜひご覧ください。