项目框架搭建二-前端（HTML，CSS，JavaScript，JQuery，AngularJS，Bootstrap，NodeJS，React，Vue）

最新推荐文章于 2022-12-13 11:28:05 发布

LaputaXie

最新推荐文章于 2022-12-13 11:28:05 发布

阅读量2.1k

点赞数 4

分类专栏：页面文章标签： vue javascript web css jquery

本文链接：https://blog.csdn.net/weixin_42426099/article/details/104102410

版权

页面专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

环境
导言
脑图
正文

环境

操作系统：Win10
开发工具：Sublime 3.2.2
包管理工具：NPM 6.13.6

导言

有的东西久了没接触方向都找不到，本文就想快速重建起对一个技术的整体认识，不做太多延伸。最后提供完整代码下载。

脑图

在这里插入图片描述

正文

1.加入HTML

新建项目

index.html

<!-- 声明网页的版本(5) -->
<!doctype html>
<html>
	<head>
		<!-- 声明网页内容的编码 -->
		<meta charset="utf-8">
		<!-- 声明网页的标题 -->
		<title>HTML小demo</title>
	</head>
	<body>
		<!-- 标题 -->
		<h1>这是标题</h1>
		<!-- 段落 -->
		<p>这是段落</p>
		<!-- 列表 -->
		<ul>
			<li>列表第1行</li>
			<li>列表第2行</li>
			<li>列表第3行</li>
		</ul>
		<!-- 区域 -->
		<span> 
			<!-- 字体设置 -->
			<i><b><u>这是一个区域，字体很奇怪</u></b></i>
		</span>
		<!-- 图片 -->
		<p>
			<img src="1.jpg"/> <!-- 1.jpg与html文件在同一路径下 -->
		</p>
		<!-- 超链接 -->
		<p>
			<a href="#">回到顶部</a>
		</p>
		<!-- 表格 -->
		<table border="1" cellspacing="0" width="30%">
			<tr>
				<td>第一行第1列</td>
				<td>第一行第2列</td>
			</tr>
			<tr>
				<td>第二行第1列</td>
				<td>第二行第2列</td>
			</tr>
		</table>
		<!-- 分区 -->
		<div>
			<p>版权所有，违者必究。</p>
		</div>
		<!-- 表单 -->
		<form action="https://www.baidu.com">
			<p><input type="submit" value="注册"/></p>
			<p><textarea rows="5" cols="30">文本域</textarea></p>
		</form>
	</body>
</html>

查看效果

2.加入CSS

可通过三种方式引入，之后基本思路就是选择器+样式属性设置

新建项目

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS小demo</title>
	<!-- 2.内部样式：在style内写的样式。 -->
	<style>
		<!-- 通过css选择器 -->
		h2 {
			color:blue;
		}
	</style>
	<!-- 3.外部样式：通过link引入的css文件。 -->
	<link rel="stylesheet" href="x.css"/>
</head>
<body>
	<!-- 1.内联样式：直接在元素上写的样式。 -->
	<h1 style="color:red;">哇 变红了</h1>
	<h2 >哇 变蓝了</h2>
	<h3 >哇 变黄了</h3>
</body>
</html>

x.css

h3 {
	color:yellow;
}

验证功能

3.加入JavaScript

可通过三种方式引入，大概就是基本语法和各种内置对象的使用（Dom很重要）

新建项目

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>JavaScript小demo</title>
	<!-- 2.嵌入式：在script内写JS -->
	<script>
		function f2() {
			alert("武汉加油!!");
		}
	</script>
	<!-- 3.文件调用式：在独立的js文件中写JS -->
	<script src="x.js"></script>
</head>
<body>
	<!-- 1.事件定义式：在元素上定义事件时直接写JS。 -->	
	<input type="button" value="按钮1" onclick="alert('大家好!');"/>
	
	<input type="button" value="按钮2" onclick="f2();"/>
	
	<input type="button" value="按钮3" onclick="f3();"/>
</body>
</html>

x.js

function f3() {
	alert("不串门 勤洗手 带口罩!!!");
}

验证功能（点按钮触发对话框）

4.加入JQuery

新建项目
新建文件夹：JQuerydemo
项目初始化：npm init
下JQuery包：npm install jquery --save

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery小Demo</title>
<!-- 1.引入jQuery文件 -->
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script>
	function bigger() {
		//2.通过选择器选中节点
		var size = $("p").css("font-size");
		//3.调用API操作节点
		size = size.replace("px","");
		$("p").css("font-size",++size+"px");
	}
</script>
</head>
<body>
	<input type="button" value="+++" onclick="bigger();"/>
	<p>测试字体</p>
</body>
</html>

查看效果（点按钮字体会变大）

5.加入AngularJS

新建项目
项目初始化：npm init
下AngularJS包：npm install angular --save

<html>
<head>
	<title>AngularJS小demo</title>
	<!-- AngularJS就是个js框架，在这里引入 -->
	<!-- AngularJS基本思路就是模块->控制层（->服务层）->数据 实现了分层开发和双向绑定（数据<->视图） -->
	<script src="./node_modules/angular/angular.min.js"></script>
	<script>
		//新建模块，模块名叫myApp
		var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
		//在模块上定义控制器，用来操作模块的数据
		//加$的都是AngularJS的内置对象，比如$scope、$http、$watch
		//$scope表示作用域。通过它连接特定控制器下的视图和数据。
		app.controller('myController',function($scope){
			$scope.add=function(){
				$scope.z = parseInt($scope.x)+parseInt($scope.y);
			}
		});
	</script>
</head>
<!-- ng-app绑定某个模块，也定义了AngularJS应用程序的根元素-->
<!-- ng-controller绑定对应模块下的某个控制器-->
<body ng-app="myApp" ng-controller="myController">
	<!-- ng-model绑定变量-->
	x:<input ng-model="x" >
	y:<input ng-model="y" >
	<!-- ng-click AngularJS的点击事件 -->
	<button ng-click="add()">运算</button>
	<!-- {{}}是AngularJS的表达式，内部的运算或变量会被AngularJS自动加载执行-->
	结果：{{z}}
</body>
</html>

查看效果（点运算按钮会显示结果）

在这里插入图片描述

6.加入Bootstrap

新建项目：Bootstrapdemo
项目初始化：npm init
下载相关包

“bootstrap”: “^3.4.1”,
“html5shiv”: “^3.7.3”,
“jquery”: “^3.4.1”,
“respond.js”: “^1.4.2”

在这里插入图片描述
index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <!-- 设置当前HTML文件的字符编码 -->
  <meta charset="utf-8">
  <!-- 设置浏览器的兼容模式版本 （让IE使用最新的渲染引擎工作） -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 声明当前网页在移动端浏览器中展示的相关设置 -->
  <!-- 移动端如果网页尺寸过大，会通过视口对网页缩放后再进行呈现-->
  <!-- viewport:视口 content:视口的宽度等于移动设备的宽度 initial-scale：初始缩放为1 user-scalable：不允许用户调整缩放比例-->
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <!-- 上述3个meta标签必须放在最前面-->
  <title>bootstrap小demo</title>
  <!-- 引入Bootstrap核心样式表文件 -->
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
  <!-- 条件注释 -->
  <!-- html5shiv让浏览器可以识别HTML5的新标签 -->
  <!-- respond让低版本浏览器可以使用CSS3的媒体查询 -->
  <!--[if lt IE 9]>
      <script src="node_modules/html5shiv/dist/html5shiv.min.js"></script>
      <script src="node_modules/respond/dest/respond.min.js"></script>
    <![endif]-->
  <!-- 自己写的css文件默认放在最下面 (这里不用)
  <link rel="stylesheet" href="css/main.css">-->
</head>

<body style="background-color: #fff" ;>
  <div style="width:100%";> 
	   <h1>Hello World</h1>
  </div>
  <h4>1、Bootstrap全局CSS</h4>
  <div class="row">
    <!-- 栅格系统实现了响应式布局：随着屏幕或视口尺寸的增加，系统会自动分为最多12列，水平排列或堆积-->
    <div class="col-md-8" style="background-color: #a33" ;>栅格系统-12份占8份</div>
    <div class="col-md-4" style="background-color: #f55" ;>栅格系统-12份占4份</div>
  </div>
  <p></p>

  <h4>2、Bootstrap各种组件</h4>
  <span class="glyphicon glyphicon-tint"></span>
  <p></p>

  <h4>3、Bootstrap JavaScript插件</h4>
  <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
    Single toggle
  </button>

  <!-- 把JS放最下面是为了不让加载JS文件占用页面渲染的时间，进而影响用户体验 -->
  <!-- Bootstrap 的所有JS组件都是依赖JQUERY的 -->
  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <!-- 引入Bootstrap核心JS组件文件 -->
  <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <!-- 自己写的js文件默认放在最下面 (这里不用)
  <script src="js/main.js"></script>-->
</body>
</html>

查看效果

7.加入NodeJS

到NodeJS官网(https://nodejs.org/en/)下载安装包，安装并查看版本
创建项目

a.txt

It's your life

helloworld.js

var foo = 'hello nodejs'
console.log(foo)

service.js

//1.读取文件
//1.1加载 fs 核心模块。模块分系统的核心模块、用户自己的模块、第三方模块
var fs = require('fs')
//1.2读取文件
fs.readFile('./a.txt', function (error, data) {
	if (error) {
    console.log('读取文件失败了')
  } else {
    console.log('文件读取成功:'+data.toString())
  }
})
//2.http请求
//2.1加载 http 核心模块
var http = require('http')
//2.2创建一个 Web 服务器,并返回一个Server实例
var server = http.createServer()
//2.3注册请求事件，提供服务
server.on('request', function(req, res){
  console.log('收到客户端请求了')
  res.end('<html><b>Hello,NodeJS</b></html>')
})
//2.4绑定端口，启动服务器
server.listen(4000, function () {
  console.log('服务器启动成功了，可以通过 http://127.0.0.1:4000/ 来进行访问')
})

验证功能

直接执行JS文件

进入helloworld.js文件的路径，用node命令执行该文件。
在这里插入图片描述
读取文件，处理http请求
进入service.js文件的路径，用node命令执行该文件。

8.加入React

创建项目 Reactdemo

在这里插入图片描述

构建环境
在package.json里加入如下依赖，再执行npm init

“@babel/core”: “^7.8.6”,
“@babel/preset-env”: “^7.8.6”,
“@babel/preset-react”: “^7.8.3”,
“babel-loader”: “^8.0.6”,
“html-webpack-plugin”: “^3.2.0”,
“react”: “^16.13.0”,
“react-dom”: “^16.13.0”,
“webpack”: “^4.41.6”,
“webpack-cli”: “^3.3.11”,
“webpack-dev-server”: “^3.10.3”

创建webpack配置文件

webpack.conf.js

    const htmlWebpackPlugin = require('html-webpack-plugin');
    const path = require('path')
    module.exports = {
        entry:{ //main是默认入口,也可以是多入口
            main:'./src/main.js'
        },
        output:{
            filename:'./build.js', 
            path: path.join(__dirname,'dist')   
            //代表当前目录的上一级的dist
        },
        module:{
            rules:[ 
                {test:/\.css$/,
                 loader:'style-loader!css-loader',
                },
                {
                 test:/\.(jpg|svg|png|gif)$/,
                 loader:'url-loader?limit=4096&name=[name].[ext]',
                },{//处理ES6的js
                    test:/\.js$/,
                    loader:'babel-loader',
                    //排除 node_modules下的所有
                    exclude:/node_modules/,
                    options:{
                        presets: ["@babel/preset-env","@babel/preset-react"]  //用于解析ES6+React
                    }
                }
            ]
        },
        plugins:[
            //插件的执行顺序是依次执行的
            new htmlWebpackPlugin({template:'./src/index.html' })
        ]
    }

修改package.json，编辑快捷命令

"scripts": {
    "dev": ".\\node_modules\\.bin\\webpack-dev-server --inline --hot --open",
    "build": "webpack"
  },

创建src文件夹

index.html

<html>
<head>
	<meta charset="UTF-8">
	<title>自动生成HTML</title>
</head>
<body>
	<!-- 该div即是需要被渲染的div-->
    <div id="app"></div> 
</body>
</html>

main.js

//导入第三方模块
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// 这种将 html 和 JavaScript 混写的方式叫做 JSX 语法
// 该语法必须通过 babel 编译完浏览器才能执行

//定义变量
const user = {
      name: 'Jack',
      age: 18,
      gender: 0
}
//定义数组
const fruits = [
      <li key="1">苹果</li>,
      <li key="2">香蕉</li>,
      <li key="3">橘子</li>
    ]
const todos = [
    {
      id: 1,
      title: '武汉'
    },
    {
      id: 2,
      title: '湖北'
    },
    {
      id: 3,
      title: '中国'
    }
]

const todoLis = todos.map(item => {
      return <li key={item.id}>{item.title}</li>
})

function handleClick () {
      window.alert('hello')
    }
//定义组件
// 组件的名字首字母必须大写
    function AppHeader () {
      return (
        <div className="header">
          <h1>头部</h1>
        </div>
      )
    }
// 组件也可以传参
function Welcome (props) {
      return <h1>Hello, {props.name}</h1>
}
//ES6标准组件，必要要有render返回对应的模板
class AppFooter extends React.Component {
  render () {
    return (
      <div className="footer">
        <p>底部</p>
      </div>
    )
  }
}
//JSX中可以把标签用小括号括起来

const element = (
      /* 只能有个根节点 */
      <div className="box" title={user.name}>
        {/* JSX标签内写注释 */}
        <p>1.使用react提供的属性 </p>
        <div>
          <input type="checkbox" defaultChecked />
        </div>
        <div>
          <input type="text" defaultValue="hello" />
        </div>
        <p>2.html中遇到单大括号就是js的内容</p>
        <div>
          <p>{user.name}</p>
          <p>{user.gender === 0 ? '男':'女'}</p>
        </div>
        <p>3.列表渲染</p>
          <div>
            <ul>{fruits}</ul>
          </div>
        <p>4.遍历数组</p>
          <div>
            <ul>{todoLis}</ul>
          </div>
        <p>6.事件处理</p>
          <div>
            <button onClick={handleClick}>点我</button>
          </div>
        <p>7.自定义组件</p>
          <div>
            <AppHeader/>
              <Welcome name="张三" />
              <Welcome name="李四" />
            <AppFooter/>
          </div>
      </div>
    )
//传递渲染的内容和通过Dom定位渲染的位置
ReactDOM.render(element, document.getElementById('app'));

编译、查看效果
运行 npm run dev

9.加入Vue

创建项目
在package.json里加入如下依赖，再执行npm init

“babel-core”: “^6.26.3”,
“babel-loader”: “^7.1.5”,
“html-webpack-plugin”: “^3.2.0”,
“vue”: “^2.6.11”,
“vue-loader”: “^15.9.0”,
“vue-router”: “^3.1.5”,
“vue-template-compiler”: “^2.6.11”,
“webpack”: “^4.41.6”,
“webpack-cli”: “^3.3.11”,
“webpack-dev-server”: “^3.10.3”,
“css-loader”: “^3.4.2”,
“style-loader”: “^1.1.3”

创建webpack配置文件

webpack.config.js

const htmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path')
module.exports = {
   entry:{ //main是默认入口,也可以是多入口
       main:'./src/main.js'
   },
   output:{
       filename:'./build.js', 
       path: path.join(__dirname,'dist')
       //代表当前目录的上一级的dist
   },
   module:{
       rules:[ 
           {test:/\.css$/,
            loader:'style-loader!css-loader',
           },
           {
            test:/\.(jpg|svg|png|gif)$/,
            loader:'url-loader?limit=4096&name=[name].[ext]',
           },{//处理ES6的js
               test:/\.js$/,
               loader:'babel-loader',
               //排除 node_modules下的所有
               exclude:/node_modules/,
           },{
               test:/\.vue$/,
               loader:'vue-loader',//vue-template-compiler是代码上的依赖
           }
       ]
   },
   plugins:[
       //插件的执行顺序是依次执行的
       new htmlWebpackPlugin({
           template:'./src/index.html',
           }),
       new VueLoaderPlugin()
   ]
}

修改package.json，编辑快捷命令

"scripts": {
    "dev": ".\\node_modules\\.bin\\webpack-dev-server --inline --hot --open",
    "build": "webpack"
  },

创建src文件夹

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Demo</title>
</head>
<body>
	<div id="app"></div>
</body>
</html>

main.js

import Vue from 'vue'
import App from './app.vue'
new Vue({
	el:'#app',
	render:function (creater) {
		return creater(App);
	}
})

app.vue

//包含 template/script/style,最终生成DOM结构
<template>
	<div>
		<div>Hello Vue</div>
		<p>1.双向数据绑定</p>
		<div>{{text}}</div>
		输入：<input type="text" v-model="text">
		<p>2.遍历表格</p>
		<ul>
            <li v-for="person in list">
                {{person.name}}
            </li>
        </ul>
        <p>3.v-if元素是否移除 v-show元素是否显示</p>
        <div v-if="isShow" style="height:30px;background-color:red;"></div>
        <div v-show="isShow" style="height:30px;background-color:green;"></div>
		<p>4.v-text元素内容(文本) v-html元素内容(html)</p>
		<span v-text="text"></span>
		<span v-html="html"></span>
		<p>5.v-bind用法灵活</p>
		<div :class="{'red':true,'big':true}">v-bind绑定属性</div>
		<li v-for="(stu,index) in stus" :key="index">
            index:{{index}},stu:{{stu}}
        </li>
        <p>6.@click事件</p>
        <button @click="change">点我</button>
	</div>
</template>
<script>
	//导出模块属性
	export default {
		//这里存放数据
		 data(){
            return {  
                text:'大家好',
                list:[{name:'jack'},{name:'rose'}],
                isShow:false,
                html:`
                    <ul>
                        <li>武汉</li>
                        <li>湖北</li>
                        <li>中国</li>
                    </ul>
                `,
                stus:[{name:'jack',score:'A'},{name:'rose',score:'B'}]
            }
        },
        //这里存放函数
        methods:{
        	change(){
        		 window.alert('hello')
        	}
        }
	}
</script>
<style>
	.red{
		background-color: red;
	}
	.big{
    	font-size: 20px;
	}
</style>

编译、查看效果
运行 npm run dev

完整代码下载

提取码：shp3

LaputaXie

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
项目框架搭建二-前端（HTML，CSS，JavaScript，JQuery，AngularJS，Bootstrap，NodeJS，React，Vue）

环境操作系统：Win10开发工具：Eclipse IDE for Enterprise Java Developers Version: 2019-03 (4.11.0)Web服务器：Tomcat8.0数据库：Mysql5.7导言基本的页面由HTML，CSS，JavaScript构成，浏览器解释运行。jQuery，AngularJS，Bootstrap，Vue都是在此之上封装的框架...
复制链接

扫一扫

专栏目录