JavaWeb学习笔记

已于 2023-10-08 08:21:33 修改
阅读量163 收藏 1
点赞数 2
分类专栏： 前端 JavaWeb 文章标签： 学习 笔记 前端
于 2023-10-01 20:13:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pengjixuan0524/article/details/133468265
版权

1.Vue

1.1Vue概述

  • Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
  • 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
  • 官网： https://v2.cn.vuejs.org/

框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

 1.2Vue快速入门

  • 新建HTML页面，引入Vue.js文件
<script src="js/vue.js"></script>
  • 在JS代码区域，创建Vue核心对象，定义数据模型
<script>
    new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!"
        }
    })
</script>
  • 编写视图
<div id="app">
    <input type="text" v-model="message">
    {{ message }}
</div>

 什么是插值表达式？

形式： {{ 表达式 }}。 内容可以是： 变量， 三元运算符， 函数调用， 算术运算。

1.3Vue常见指令

  • 指令：HTML 标签上带有 v- 前缀 的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
  • 常用指令

指令

作用

v-bind

为HTML标签绑定属性值，如设置 href , css样式等

v-model

在表单元素上创建双向数据绑定

v-on

为HTML标签绑定事件

v-if

条件性的渲染某元素，判定为true时渲染,否则不渲染

v-else-if

v-else

v-show

根据条件展示某元素，区别在于切换的是display属性的值

v-for

列表渲染，遍历容器的元素或者对象的属性

  • v-bind
  • <a v-bind:href="url">传智教育</a>

    <a :href="url">传智教育</a>
  •   v-model
<input type="text" v-model="url">
  • 注意：通过v-bind或者v-model绑定的变量，必须在数据模型中声明。
<script>
  new Vue({
     el: "#app",
     data: {
        url: "https://www.itcast.cn"
     }
  })
</script>
  • v-on
<input type="button" value="按钮" v-on:click="handle()">

<input type="button" value="按钮" @click="handle()">

<script>
    new Vue({
        el: "#app",
        data: {
	//...
        },
        methods: {
            handle:function(){
                alert('我被点击了');
            }
        },
    })
</script>
  • v-if
年龄{{age}},经判定为:
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>
  • v-show 
年龄{{age}},经判定为:
<span v-show="age <= 35">年轻人</span>
  • v-for
<div v-for="addr in addrs">{{addr}}</div>
<div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>

//
data: {
   . . .
   addrs: ['北京','上海','广州','深圳','成都','杭州']
},

1.4Vue的生命周期

  • 生命周期：指一个对象从创建到销毁的整个过程。
  • 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

状态

阶段周期

beforeCreate

创建前

created

创建后

beforeMount

挂载前

mounted

挂载完成

beforeUpdate

更新前

updated

更新后

beforeDestroy

销毁前

destroyed

销毁后

  • 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)

  • mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）

<script>
    new Vue({
        el: "#app",
        data: {
            
        },
        mounted() {
            console.log("Vue挂载完毕,发送请求获取数据");
        },
        methods: {
           
        },
    })
</script>

2.Ajax

2.1Ajax概述

  • 概念：Asynchronous JavaScript And XML，异步的JavaScript和XML。
  • 作用：
  • 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
  • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

2.2同步请求和异步请求的区别

2.3原生Ajax

  1. 准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list
  2. 创建XMLHttpRequest对象：用于和服务器交换数据
  3. 向服务器发送请求
  4. 获取服务器响应数据

注：由于过于繁琐，用的很少

<body>
    <input type="button" value="获取数据" onclick="getData()">
    <div id="div1"></div></body>

<script>
    function getData(){
        //1. 创建XMLHttpRequest 
        var xmlHttpRequest  = new XMLHttpRequest();
        //2. 发送异步请求
        xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
        xmlHttpRequest.send();//发送请求
        //3. 获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
            }
        }
    }
</script>

2.4Axios

2.4.1Axios概述
2.4.2Axios入门
  • 引入Axios的js文件
<script src="js/axios-0.18.0.js"></script>
  • 使用Axios发送请求，并获取响应结果
axios({
    method: "get",
    url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
}).then((result) => {
    console.log(result.data);
});
//成功回调函数
axios({
    method: "post",
    url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
    data: "id=1"
}).then((result) => {
    console.log(result.data);
});
//成功回调函数

2.4.3 推荐方式
  • 发送GET请求
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {
    console.log(result.data);
});
  • 发送POST请求
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then((result) => {
    console.log(result.data);
});

3 前后端分离是开发

3.1前后端混合式开发

3.2 前后端分离式开发

4 前端工程化

4.1 前端工程化概述

前端工程化：是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

4.2 环境准备

  • 介绍： Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板。
  • Vue-cli提供了如下功能：
  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线
  • 依赖环境：NodeJS
4.2.1 操作步骤
  • 安装NodeJS
  • 安装 vue-cli
npm install -g @vue/cli

4.3 Vue项目

4.3.1创建
  • 命令行：
vue create vue-project01
  • 图形化界面(在vue所在的文件加下输入)：
vue ui
4.3.2 目录结构
  • 基于Vue脚手架创建出来的工程，有标准的目录结构，如下：

4.3.3启动

4.3.4配置端口
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7000,
  }
})

4.3 Vue项目开发流程

5.Vue组件库Element

5.1 Element概述

  • Element：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

  • 组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。

  • 官网：https://element.eleme.cn/#/zh-CNListener

5.2 快速入门

  • 安装ElementUI组件库 （在当前工程的目录下），在命令行执行指令：
npm install element-ui@2.15.3

  • 引入ElementUI组件库

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

  • 访问官网，复制组件代码，调整

5.3 常见组件

  • Table 表格：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

  • Pagination 分页：当数据量过多时，使用分页分解数据。

  • Dialog 对话框：在保留当前页面状态的情况下，告知用户并承载相关操作。

  • Form 表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。

6 Vue路由

6.1 Vue路由概述

  • 前端路由: URL中的hash(#号) 与组件之间的对应关系。
  • 介绍： Vue Router 是 Vue 的官方路由。
  • 组成：
  •  VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
  • <router-link>：请求链接组件，浏览器会解析成<a>
  • <router-view>：动态视图组件，用来渲染展示与路由路径对应的组件

6.2 案例：tilas智能学习辅助系统

//EmptView

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size:40px;background:#B3C0D1; ">tlias 智能学习辅助系统</el-header>
      <el-container>
        <el-aside width="210px" style=" border: 1px solid #eee">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                  <router-link to="/emp">员工管理</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                  <router-link to="/dept">部门管理</router-link>
                </el-menu-item>
              </el-menu-item-group>

            </el-submenu>

          </el-menu>
        </el-aside>
        <el-main>

          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="活动区域">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="日期">
              <el-date-picker
                  v-model="searchForm.entrydate"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>


            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>

          </el-form>

          <el-table :data="tableForm" border>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="image" label="图像" width="180"></el-table-column>
            <el-table-column prop="gender" label="性别" width="140">
              <template slot-scope="scope">
                    {{scope.row.gender===1?'男':'女'}}
              </template>
            </el-table-column>
            <el-table-column prop="job" label="职位" width="140"></el-table-column>
            <el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
            <el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>

          </el-table>
          <br><br>
          <el-pagination
              background
              layout="sizes,prev, pager, next,jumper,total"
              :total="1000">
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";

export default {

  data() {
    return {
      tableForm: [],
      searchForm: {
        name: '',
        gender: '',
        entrydate: []
      }
    }
  },
  methods: {
    onSubmit: function () {
      alert('aaa')
    }
  },
  mounted() {
    axios.get("https://yapi.pro/mock/111437/user/emp").then((result) => {
      this.tableForm = result.data.data;
    });
  }
}
</script>

<style scoped>

</style>
//DeptView

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size:40px;background:#B3C0D1; ">tlias 智能学习辅助系统</el-header>
      <el-container>
        <el-aside width="210px" style=" border: 1px solid #eee">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                  <router-link to="/emp">员工管理</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                  <router-link to="/dept">部门管理</router-link>
                </el-menu-item>
              </el-menu-item-group>

            </el-submenu>

          </el-menu>
        </el-aside>
        <el-main>

          <el-table
              :data="tableForm"
              border
              style="width: 100%">
            <el-table-column
                fixed
                prop="num"
                label="序号"
                width="150">
            </el-table-column>
            <el-table-column
                prop="deptname"
                label="部门名称"
                width="120">
            </el-table-column>
            <el-table-column
                prop="updatetime"
                label="最后操作时间"
                width="120">
            </el-table-column>

            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";

export default {

  data() {
    return {
      tableForm: []
    }
  },
  mounted() {
    axios.get("https://yapi.pro/mock/111437/user/dept").then((result) => {
      this.tableForm = result.data.data;
    });
  }
}
</script>

<style scoped>

</style>
//App.vue

<template>
  <div id="app">
<!--    <element-view></element-view>-->
<!--    <emp-view></emp-view>-->
<!--    <dept-view></dept-view>-->
    <router-view></router-view>
  </div>
</template>

<script>
// import ElementView from "@/views/element/ElementView.vue";

// import EmpView from "@/views/tlias/EmpView.vue";
// import DeptView from "@/views/tlias/DeptView.vue";

export default {
  // components: {DeptView/*EmpView*/},
  // components: {ElementView},
  data() {
    return {
      message: 'Hello Vue'
    }
  },
  methods: {
    on(){
      alert("aaa")
    }
  }
}
</script>

<style>

</style>

未完待续>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>endl;

xxxxxxxpp
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaweb 学习笔记
07-13
javaweb实训间学习笔记有兴趣的可以看看
JAVAWEB学习笔记
01-19
JAVAWEB学习笔记
JavaWeb开发 —— Ajax
hdakj22的博客
04-12 1770
Ajax介绍、原生Ajax、Axios以及综合案例分析练习
JavaWeb开发-03-Ajax-Vue-Element
wangjh11234的博客
05-27 388
JavaWeb开发-03-Ajax-Vue-Element
【JavaWeb】Vue-Element
qinjilll的博客
04-05 438
Vue的组件文件以 .vue结尾，每个组件由三个部分组成：、、。YApi是高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库。vue-cli 是vue官方提供的一个脚手架，用于快速生成一个vue的项目模板。组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等。的技术，如：搜素联想、用户名是否可 用的校验等等。
Javaweb之Axios的详细解析
qq_69748833的博客
11-22 1737
前端首先是一张表格，我们缺少数据，而提供数据的地址已经有了，所以意味这我们需要使用Ajax请求获取后台的数据。但是Ajax请求什么时候发送呢？页面的数据应该是页面加载完成，自动发送请求，展示数据，所以我们需要借助vue的mounted钩子函数。ajax请求的数据我们应该绑定给vue的data属性，之后才能进行数据绑定到视图；首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入。首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入。
Axios异步请求
weixin_46597615的博客
04-13 363
Axios异步请求
黑马JAVAWeb Day3
CaiZijian2002的博客
10-25 631
P34 Ajax介绍。
javaweb学习笔记
08-06
javaweb学习笔记
尚硅谷2022Javaweb学习笔记（个人总结）
03-24
尚硅谷2022Javaweb学习笔记（个人总结）
vue中通过axios发送请求接收对象，并用变量接收对象中的数据
qq_60390518的博客
06-10 1035
相当于json对象.data；然后要想在vue对象中接收这个数组，首先在vue的data中设置相应的变量，注意：变量类型要对应上否则没法接收。其中result.data接收到的是一个json对象，这里是想得到json对象中的名为data的数组，所以用的是。其接收的json对象如下。
JavaWeb2023_03_Vue-Element
qq_52922453的博客
05-25 310
前后台混合开发和前后台分离开发。前后台混合开发，顾名思义就是前台后台代码混在一起开发，如下图所示：这种开发模式有如下缺点：沟通成本高：后台人员发现前端有问题，需要找前端人员修改，前端修改成功，再交给后台人员使用分工不明确：后台开发人员需要开发后台代码，也需要开发部分前端代码。很难培养专业人才不便管理：所有的代码都在一个工程中不便维护和扩展：前端代码更新，和后台无关，但是需要整个工程包括后台一起重新打包部署。
Javaweb之Vue组件库Element案例异步数据加载的详细解析
qq_69748833的博客
12-03 723
需要使用axios时，导入axios: import axios 'axios'我们最后要做的就是异步加载数据，所以我们需要使用axios发送ajax请求。但是很明显，性别和图片的内容显示不正确，所以我们需要修复。slot-scope: 通过属性的row获取当前行的数据。安装axios: npm install axios。此时打开浏览器，效果如下图所示：性别一列的值修复成功。此时回到浏览器，效果如下图所示：图片展示修复成功。 : 用于自定义列的内容。
014-Axios Ajax-尚硅谷2022+黑马2023：Ajax概述 同步异步，(Axios 发送普通请求参数，发送请求体JSON，服务器端返回JSON数据)后端是servlet方式
aa35434的博客
03-15 1847
使用原生的JavaScript程序执行Ajax极其繁琐，所以一定要使用框架来完成。而Axios就是目前最流行的前端Ajax框架。Axios官网使用Axios和使用Vue一样，导入对应的*.js文件即可。官方提供的script标签引入方式为：
Ajax详解
m0_63260018的博客
07-15 2538
Ajax 是 “Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）的缩写。它是一种在无需重新加载整个网页的情况下，与服务器交换数据并更新部分网页内容的技术。简单来说，Ajax 可以让网页在不影响用户体验的前提下，实时更新数据。
黑马2023JAVAweb|Ajax,Axios2
最新发布
leeyayai_xixihah的博客
12-06 780
（Vue渲染数据，最开始数据是固定不可变的(html文件中敲得)）--->DOM文档对象模型，其通过标签获取元素（文本，图片，视频），再更改数据，但这个过程还是在html文件中进行的--->Vue，可以在网页端操作数据--->Ajax从url服务端获取数据。拿到数据后，后面对数据进行处理就又回到DOM，CSS等基本操作）前后端通过接口文档各自实现功能接口文档示例。
javaweb开发Day3（宝藏干货冲冲冲）
爱吃Java的羊的博客
08-17 130
1、准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list。模块化（js、css） 组件化（UI结构、样式、行为）规范化（目录结构、编码、接口）自动化（构建、部署、测试）2、创建XMLHttpRequest对象：用于和服务器交换数据。检查是否安装nodejs和npm镜像文件。原生Ajax（基本不用）4、获取服务器响应数据。3、想服务器发送请求。接口文档：YApi（
【JavaWeb】前端框架（Vue+Ajax+工程）
qq_44544908的博客
04-05 941
Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。官网：框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。Vue项目-创建vue uiVue项目-目录结构基于Vue脚手架创建出来的工程，有标准的目录结构，如下：Vue项目-启动Vue项目-配置端口打开vue.config.js。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值