快速入门Web开发（上）黑马程序员JavaWeb开发教程

Qiuner

发布于 2024-07-19 15:56:01

5770

文章被收录于专栏：txy自动搬运txy自动搬运

快速入门Web开发（上）

本文档是黑马程序员的黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）_哔哩哔哩_bilibili
上这篇没有写什么很深的个人见解但下篇有

开发Web网站的方式

前后端分离开发

前端开发内容

ajax

什么是ajax

ajax即 异步JavaScript和XML（异步交互技术（异步通信技术）），可以在不更新所有网页的情况下，更新部分网页。

同步与异步

一个网页还没加载出来时，导航栏下面是空白，这个时候点击空白处没有任何反应，这就是同步技术

操作ajax

axios

使用方法一

使用方法2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/axios.js"></script>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <button @click="search">查询新闻信息</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            methods: {
                search() {
                    axios.get("http://localhost:3000/posts")
                        .then(res => {//通过回调函数（参数函数）then来处理请求成功
                            console.log(res.data);
                        })
                }
            }
        });
    </script>
</body>

</html>

接口文档

为什么要有接口文档？

通过一份相同的东西，比如指定年龄为int型数据，把这个指定成为接口文档。前端和后端分别按照文档来开发

接口文档管理工具YApi

mock服务指生成数据来供使用

前端工程化

安装nodejs与vue/cli

nodejs是一个js运行环境

1、验证是否安装成功
node -v
（输出版本号则成功）
2、进行相关配置）（以管理员身份运行）
npm config set prefix (nodejs安装目录)

npm config set prefix "D:\Nodejs"
3、验证配置是否成功
npm config set prefix
（输出 NodeJS 则成功）
4、切换npm淘宝镜像来加速(管理员)
npm config set registry https://registry.npm.taobao.org

1、
npm install -g @vue/cli
2、验证是否安装成功
vue --version
出现版本号就是成功了

Vue

什么是vue？

vue使用双向数据绑定，view是视图层，当视图层发生改变时，model层相应数据也发送改变。反之同理

Vue的基础使用

是el 不是e1
v-model是一个指令，使得数据双向绑定
每一个vue实例只能由一个el

想要控制多个元素，就需要创建多个vue
图中el对应的值是id选择器加app1
一个元素只能绑定一个vue元素

差值表达式

{{}} 叫做差值表达式

只要名称相同，可以叫任何东西

常见的vue指令

使用v-bind

这样a标签所链接的东西就是随着vue对象变化而变化了

通过更改v-on后面的click和” “中的内容，可以实现不同的事件触发不同的方法
方法要写在methods区域
可以使用@来简写

v-show与v-if

通过v-if实现，只会出现符合条件的元素

而通过v-show则将所有元素加载出来，但只显示符合条件的元素

v-for

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<body> 
    <div id="app">
        <div v-for="a in arr">{{arr}}</div>
    </div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {
            arr: ['a', 'b', 'c']
        }
    })
</script>

</html>

以上代码输出这个，代表了每次遍历都输出一遍arr的内容
{{}}这个插值对只输出相应内容，而a in arr做到了遍历
in是必不可少的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<body> 
    <div id="app">
        <div v-for="a in arr">{{a}}</div>//改动了这里
    </div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {
            arr: ['a', 'b', 'c']
        }
    })
</script>

</html>

证明a取到了相应内容，而插值对也做出了相应输出
v-for 的索引默认从零开始
插值表达式中可以进行算数运算

注意

使用集合存储数据时，记得搞清楚具体的名字

Vue的生命周期

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=C%3A%5CUsers%5CJW%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230731165733367.png&pos_id=img-W3JlGnPN-1713410731750)

创建阶段（Creation Phase）：
- beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。
- created：在实例创建完成后被调用。在这个阶段，实例已经完成数据观测、属性和方法的运算，但是尚未挂载到DOM上。
挂载阶段（Mounting Phase）：
- beforeMount：在实例挂载到DOM之前被调用。
- mounted：在实例挂载到DOM后被调用。在这个阶段，实例已经完成了挂载，可以访问到DOM元素。(提交表单)
更新阶段（Updating Phase）：
- beforeUpdate：在响应式数据更新之前被调用，即数据发生改变、重新渲染之前。
- updated：在数据更新完成后被调用。在这个阶段，DOM已经完成更新。
销毁阶段（Destroying Phase）：
- beforeDestroy：在实例销毁之前被调用。在这个阶段，实例仍然完全可用。
- destroyed：在实例销毁之后被调用。在这个阶段，实例的所有指令和事件监听器都已被解除，所有子实例也被销毁。

Vue项目

需要创建一个文件夹，在文件夹中打开命令行输入vue ui

将包管理器改为对应

启动

默认启动App.vue

npm run serve

访问http://localhost:8080/ 该默认网址会出现该页面

即以上页面

修改服务端口号

使用import导入，export组成一个模块
等价于下面
vs6中，属性与名相同可以只写一半

导出export

其中，export default是导出语法

// utils.js
export default function add(a, b) {
  return a + b;
}

// main.js
import add from './utils.js';

console.log(add(2, 3)); // 输出 5

export default 没有指定名称是因为它导出的是一个对象字面量（即一个没有具体名称的对象）。当使用 export default 导出时，可以直接将对象字面量作为默认导出的内容，而不需要为它指定一个特定的名称。在这种情况下，代码中的 export default 导出的是一个包含组件选项的对象，并且没有为这个对象指定一个名称。这样做的好处是，其他模块在使用 import 关键字引入这个默认导出时，可以为它指定任意的名称，使其更具可读性和语义化。不指定名称的另一个原因是，通过将对象字面量作为默认导出，可以更方便地在其他模块中进行引用和使用。通过 import 关键字，可以为默认导出指定任意的名称，使代码更加灵活和易于维护。

导入export

如果要导入一个没有名称的 export，可以使用 import 语句，但是可以省略导入的变量名。

假设你有一个名为 myModule.js 的模块，并且在该模块中使用 export 导出了一个值，而没有为该导出指定名称。以下是导入这个没有名称的 export 的示例：

import './myModule.js';

在上述示例中，使用 import 语句导入了 myModule.js 模块，但并没有为导入的值指定变量名。这样做是为了执行 myModule.js 中的副作用，例如在模块中定义的全局变量、执行代码等。

需要注意的是，导入没有名称的 export 时，你不能直接使用导入的值，因为没有为其指定变量名。但是，它可以用作执行副作用的手段。例如，当导入的模块包含在浏览器环境中注册全局变量的代码时，可以使用这种方式导入模块，而不需要使用导入的值。

如果你需要使用导入的值，可以使用 import 语句为其指定一个变量名：

import myValue from './myModule.js';

console.log(myValue); // 使用导入的值

Vue路由

Element

https://element.eleme.cn/#/zh-CN

左原生右为Element

npm install element-ui@2.15.3

使用

1、在views中建element文件夹来存放

2、搭出vue文件所有内容

以下div中内容需要去找相应内容
https://element.eleme.cn/#/zh-CN/component/layout

<template>
    <div>
        <!--button  样式-->>
        <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    </div>
</template>

<script>
export default {
    
}
</script>

<style>

</style>

3、应用

<template>
  <div>
    <!-- <h1> {{ message }}</h1> -->
   <element-view></element-view>//
  </div>
</template>

<script>
import ElementView from './views/element/ElementView.vue'
export default {
  components: { ElementView },
  data() {
    return {
      message: "Hello vue"
    }
  },
  methods: {

  }
}
</script>
<style></style>

想要添加组件方法，去官网复制后添加到以下位置

多看官网就能学会

 <!-- 自定义对话框二 -->
    <el-button type="text" @click="dialogFVisible = true">打开嵌套表格的 Dialog</el-button>
    <el-dialog title="收货地址" :visible.sync="dialogFVisible">
    </el-dialog>
//该对话框根据@click来决定。通过dialog来决定对话框中有无内容

 alert(JSON.stringify(this.form))
//通过JSON将对象转换成字符串

插槽

路由

使用路由可以完成切换工能

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/EmpView1',//在浏览器导航栏后面输入什么
    name: 'home',//该路由的名字
    component: () => import('../views/tilas/EmpView1.vue')//访问的路径
  },
  {
    path: '/EmpView',
    name: 'home1',
    component: () => import('../views/tilas/EmpView.vue')//访问的路径
  },
]

const router = new VueRouter({
  routes
})

export default router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',//默认的路径
    name: 'home1',
    component: () => import('../views/tilas/EmpView.vue')//访问的路径
  },
  {
    path: '/EmpView1',//在浏览器导航栏后面输入什么
    name: 'home',//该路由的名字
    component: () => import('../views/tilas/EmpView1.vue')//访问的路径
  },
  {
    path: '/EmpView',
    name: 'home1',
    component: () => import('../views/tilas/EmpView.vue')//访问的路径
  },
]

const router = new VueRouter({
  routes
})

export default router

// 以上功能都完成后，使用routeview标签来实现
<template>
  <div>
    <!-- <h1> {{ message }}</h1> -->
    <!-- <element-view></element-view> -->
    <!-- <emp-view></emp-view> -->
    <router-view></router-view>
  </div>
</template>

<script>
// import EmpView from './views/tilas/EmpView.vue'
// import ElementView from './views/element/ElementView.vue'
export default {
  // components: { EmpView },
  // components: { ElementView },
  data() {
    return {
      message: "Hello vue"
    }
  }
}
</script>
<style></style>

在Vue.js中，<router-view>是一个特殊的组件，用于渲染匹配到的路由组件。当你使用<router-view>标签时，它会根据当前的路由路径匹配到对应的组件，并将其渲染到该位置。在你提供的代码中，你创建了一个Vue Router实例，并定义了一些路由规则。每个路由规则都指定了一个路径和对应的组件。当访问特定的路径时，Vue Router会根据路由规则找到对应的组件，并将其渲染到<router-view>标签所在的位置。

项目的打包与部署

打包，命令行/终端输入 npm run build
部署进入以下网址下载nginx nginx.org
将打包好的文件夹 dist 放到nginx静态资源文件夹目录，然后双击exe来执行，该服务默认占用80端口

通过任务管理器可以查看nginx进程是否启动
没有启动则打开日志文件查看原因
使用 netstat -ano | findStr 80 查看占用80端口的服务（| 叫管道符）

可以看到占用80端口的是 PID为 12492
若进程被占用，可以进入以下目录进入文件更改默认端口号 D:\nginx-1.24.0\conf\nginx.conf
server { listen 80; server_name localhost;
以上为第三十六行
端口不占用后，可以在浏览器输入 localhost:端口号来访问到部署的工程

对应的组件。当访问特定的路径时，Vue Router会根据路由规则找到对应的组件，并将其渲染到<router-view>标签所在的位置。

项目的打包与部署

打包，命令行/终端输入 npm run build
部署进入以下网址下载nginx nginx.org
将打包好的文件夹 dist 放到nginx静态资源文件夹目录，然后双击exe来执行，该服务默认占用80端口 [外链图片转存中…(img-5JThRs2b-1713410731760)]
通过任务管理器可以查看nginx进程是否启动
没有启动则打开日志文件查看原因
使用 netstat -ano | findStr 80 查看占用80端口的服务（| 叫管道符）
[外链图片转存中…(img-g4wvvzJb-1713410731761)]
可以看到占用80端口的是 PID为 12492
若进程被占用，可以进入以下目录进入文件更改默认端口号 D:\nginx-1.24.0\conf\nginx.conf
server { listen 80; server_name localhost;
以上为第三十六行
端口不占用后，可以在浏览器输入 localhost:端口号来访问到部署的工程
localhost:80

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-04-26，如有侵权请联系 cloudcommunity@tencent.com 删除

程序员