图书管理 文件头像上传 聊天机器人

小齐齐写前端
328 阅读1分钟

图书管理

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入 lib 目录下的 bootstrap 样式表 -->
  <link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css">
  <style>
    :root {
      font-size: 15px;
    }

    body {
      padding-top: 15px;
    }

    th,
    td {
      width: 20%;
    }
  </style>
</head>

<body>

  <!-- 栅格系统 -->
  <div class="container-fluid">
    <!-- 栅格系统中的一行 -->
    <div class="row">
      <!-- 左侧的表格，占了 8 列 -->
      <div class="col-sm-8">
        <table class="table table-bordered table-striped table-dark table-hover text-center">
          <thead>
            <!-- 表头行 -->
            <tr>
            <th scope="col">Id</th>
            <th scope="col">书名</th>
            <th scope="col">作者</th>
            <th scope="col">出版社</th>
            <th scope="col">操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- 表格中的每一行 -->
            <tr>
              <th scope="row">xxx</th>
              <td>xxx</td>
              <td>xxx</td>
              <td>xxx</td>
              <td>
                <button type="button" class="btn btn-link btn-sm">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 右侧的添加区域，占了 4 列 -->
      <div class="col-sm-4">
        <!-- 添加图书的卡片 -->
        <div class="card text-white bg-secondary sticky-top">
          <div class="card-header">添加新图书</div>
          <form class="card-body bg-light" id="addForm">
            <!-- 书名 -->
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text">书名</span>
              </div>
              <input type="text" class="form-control" placeholder="请输入图书名称" name="bookname">
            </div>
            <!-- 作者 -->
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text">作者</span>
              </div>
              <input type="text" class="form-control" placeholder="请输入作者名字" name="author">
            </div>
            <!-- 出版社 -->
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text">出版社</span>
              </div>
              <input type="text" class="form-control" placeholder="请输入出版社名称" name="publisher">
            </div>
            <!-- 添加按钮 -->
            <button class="btn btn-dark" type="submit">添加</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- 引入 lib 目录下的 jQuery 和 axios -->
  <script src="./lib/jquery-v3.6.0.js"></script>
  <script src="./lib/axios.js"></script>
  <script>
    // 设置基础路径
   axios.defaults.baseURL='http://www.liulongbin.top:3009'
    $(function () {
      // console.log('ok')
      // 1请求并渲染图片列表的数据
      // 2添加图书
      // 3删除图书
      // 设置axios基本路径
        
      function  initBooks(){
        axios.get('/api/getbooks').then(({
          data:res
        })=>{
         tbody.innerHTML= res.data.map((item)=>{
             return ` <tr>
               <th scope="row">${item.id}</th>
               <td>${item.bookname}</td>
               <td>${item.author}</td>
               <td>${item.publisher}</td>
               <td>
                 <button type="button" data-id="${item.id}"class=" btn-del btn btn-link btn-sm">删除</button>
               </td>
             </tr>`
          }).join('')
             
        })
      }
      let tbody=document.querySelector('tbody')
        initBooks()
        // 添加图书
        let addForm=document.querySelector("#addForm")
        addForm.onsubmit=function(e){
          //阻止跳转
          e.preventDefault()
           axios.post('/api/addbook',$(addForm).serialize()).then(({data:res})=>{
              if(res!=201){
                return alert(res.msg)
              }
              // 添加成功渲染
              alert("恭喜你添加成功")
              addForm.reset()
              addForm.initBooks()
           })
        }
        //  删除
        tbody.onclick=function(e){
           let id=e.target.getAttribute("data-id")
            if(!e.target.classList.contains('btn-del')){
              return 
            }
            axios.delete('/api/delbook',{
              params:{
                id
              }
            }).then(({data:res})=>{
               
                if(res.code !==200){
                  return alert(res.msg)
                }
                alert("恭喜你删除成功")
                initBooks()
            })
        }
      })
  </script>
</body>

</html>

文件头像上传

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>案例-头像上传</title>
  <link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css">
  <style>
    .thumb-box {
      text-align: center;
      margin-top: 50px;
    }

    .thumb {
      width: 250px;
      height: 250px;
      object-fit: cover;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <div class="thumb-box">
    <!-- 头像 -->
    <img src="./images/cover.jpg" class="img-thumbnail thumb" alt="">
    <div class="mt-2">
      <!-- 文件选择框 -->
      <!-- accept 属性表示可选择的文件类型 -->
      <!-- image/* 表示只允许选择图片类型的文件 -->
      <input multiple type="file" id="iptFile" accept="image/*" style="display: none;">
      <!-- 选择头像图片的按钮 -->
      <button class="btn btn-primary" id="btnChoose">选择 & 上传图片</button>
    </div>
  </div>

  <script src="./lib/jquery-v3.6.0.js"></script>
  <script src="./lib/axios.js"></script>
  <script>

    let inp=document.querySelector('input')
    let btn=document.querySelector("button")
    let img=document.querySelector('img')
    btn.onclick=function(){
      // 是通过dom对象直接调用的,不要再前面加on
      // 不是所有的事件都能直接调用:mouseover mouseemner
      // 能够直接调用的:click() focus() reset()
      inp.click()
      // 2选择图片后,发送ajax 选择图片触发change事件 
      inp.onchange=function(){
    // 获取文件对象 -input,files是一个文件组成的伪数组
       let file= this.files[0];//input的type值等于file的dom对象,上面才有这个属性
        // 判断,如果内容为undefinde,给出提示
        // console.log(file)
        // if(file==undefined){
        //       return alert('请选择上传文件!')
        // }
        // 基于文件对象formData对象
        let fd= new FormData
        //把文件对象,放入formdata对象中,属性以接口文档为准
        fd.append('avatar',file)
        console.log(...fd)
        // 发送axios
        axios({
          url:'http://www.liulongbin.top:3009/api/upload/avatar',
          method:'post',
          // 传递参数,不要再fd对象外面再套{}
          data:fd
        }).then(({data:res})=>{
          //判断验证码
          // console.log(res)
          if(res.code!=200){
            return alert(res.message)
          }
          // 异步代码后执行
          // 成功后提示,修改图片路径
          alert("恭喜您,上传头像成功");
          img.src='http://www.liulongbin.top:3009'+res.url;
        })
      }
    }
  </script>
</body>

</html>

聊天机器人


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

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/main.css" />
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
	<script type="text/javascript" src="js/scroll.js"></script>
	<title>聊天机器人</title>
</head>

<body>
	<div class="wrap">
		<!-- 头部 Header 区域 -->
		<div class="header">
			<h3>小思同学</h3>
			<img src="img/person01.png" alt="icon" />
		</div>
		<!-- 中间 聊天内容区域 -->
		<div class="main">
			<ul class="talk_list" style="top: 0px;">
				<li class="left_word">
					<img src="img/person01.png" />
					<span>你好</span>
				</li>
				<!-- <li class="right_word">
					<img src="img/person02.png" />
					<span>你好哦</span>
				</li> -->
			</ul>
			<div class="drag_bar" style="display: none;">
				<div class="drager ui-draggable ui-draggable-handle" style="display: none; height: 412.628px;"></div>
			</div>
		</div>
		<!-- 底部 消息编辑区域 -->
		<div class="footer">
			<img src="img/person02.png" alt="icon" />
			<input type="text" placeholder="说的什么吧..." class="input_txt" />
			<input type="button" value="发 送" class="input_sub" />
		</div>
	</div>
	<!-- 导入axios.js -->
	<script src="./js/axios.js"></script>
	<audio autoplay></audio>
	<script>
		//入口函数,相当于window.onload
		$(function () {
			// 初始化右侧滚动条
			// 这个方法定义在scroll.js中
			resetui()
			// 需求1:点击发送,生成一个li的标签,添加到页面上(appendChlid)
			// 需求2:发送ajax,获取小思同学恢复,渲染到页面上(ajax)
			// 需求3:发送ajax,把小思同学的回复转换为语言,利用audio标签自动播放

			// 需求1:点击按钮,把input内容渲染到页面(dom操作)
		})

		let input_txt = document.querySelector('.input_txt')
		let input_sub = document.querySelector('.input_sub')
		let talk_list = document.querySelector('.talk_list')

		//  注册点击事件
		input_sub.onclick = function () {
			//  获取内容进行非空判断
			let txt = input_txt.value
			if (txt == '') {
				// 清空input里面的内容
				input_txt.value.trim() = ""
				//自动获取插入条光标 手动触发获取焦点事件
				input_txt.focus()
				return alert('输入内容不能为空')
			}
			// 创建一个li标签,填充内容添加到ul
			let newlist = document.createElement('li')
			// 设置内容
			newlist.className = 'right_word'
			newlist.innerHTML = `
					<li class="right_word">
						<img src="img/person02.png" />	<span>${txt}</span>
					</li> `
			// 添加到 ul中
			talk_list.appendChild(newlist)
			// 重置滚动条
			resetui()
			// 清空内容
			input_txt.value = ''
			input_txt.focus()
			// 得到回复消息,应该写到里面
			getMsg(txt)

			function getMsg(msg) {
				// 发送ajax,获取数据后渲染到页面
				axios({
					url: 'http://www.liulongbin.top:3009/api/robot',
					method: 'get',
					params: {
						spoken: msg
					}
				}).then(({
					data: res
				}) => {
					//成功回调
					if (res.message == "success") {

						// 创建一个li标签,填充内容后,添加到ul
						let newli = document.createElement('li')
						newli.className = 'left_word'
						// 获取
						let text = res.data.info.text
						newli.innerHTML = ` <img src="img/person01.png" /><span>${text}</span>`
						talk_list.appendChild(newli)
						resetui()
						// 需求 获取语言播放
						// 写到这个ajax的回调函数里面
						getvoice(text)
					}
				})
			}
			// 封装一个函数,根据发送语言
			function getvoice(msg) {
				axios({
					url: 'http://www.liulongbin.top:3009/api/synthesize',
					method: 'get',

					params: {
						text: msg
					}
				}).then(({
					data: res
				}) => {
					//成功回调
					// console.log(res)
					if (res.code !== 200) {
						return alert('语言转换失败')
					}
					// 成功后
					let audio = document.querySelector('audio')
					audio.src = res.voiceUrl
				})
			}
		}
	</script>
</body>

</html>
avatar
文章
阅读
粉丝