下图所示，本文实现的效果(文末有源代码)
本案例整体思路：
开始操作啦！
先引入我们的基地址与axios库，获取表单的dom元素
<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script> <script> // 设置基地址，省略url重复的写法 axios.defaults.baseURL = 'http://ajax-api.itheima.net' // 获取表单需要的所有dom元素，方便后面的dom操作 const nickname = document.querySelector('[name="nickname"]') const province = document.querySelector('[name="province"]') const city = document.querySelector('[name="city"]') const area = document.querySelector('[name="area"]') const img = document.querySelector('.rounded')
一、制作渲染省市县封装模块
async function getUserInfo() { // 获取个人信息 const { data } = await axios.get('/api/settings') console.log(data); // 渲染生成昵称与头像 img.src = data.data.avatar nickname.value = data.data.nickname // 1.先从服务器获取省份的数据 const { data: data1 } = await axios.get('/api/province') console.log(data1); //2获取下拉框 province.innerHTML = data1.data.map(item => `<option value="${item}">${item}</option>`).join('') province.value = data.data.province //市 const { data: data2 } = await axios.get(`/api/city?pname=${data.data.province}`) console.log(data2); city.innerHTML = data2.data.map(item => `<option value="${item}">${item}</option>`).join('') city.value = data.data.city // 地区 const { data: data3 } = await axios.get(`/api/area?pname=${data.data.province}&cname=${data.data.city}`) console.log(data3); area.innerHTML = data3.data.map(item => `<option value="${item}">${item}</option>`).join('') area.value = data.data.area } // 调用函数 getUserInfo()
二、省市地区联动
// 1、开始做省市联动，change事件：当改变的时候才触发 province.addEventListener('change', async function () { console.log(province.value); const { data: data2 } = await axios.get(`/api/city?pname=${province.value}`) console.log(data2); city.innerHTML = data2.data.map(item => `<option value="${item}">${item}</option>`).join('') // 3、最后开始做三级（省市县）联动 const { data: data3 } = await axios.get(`/api/area?pname=${province.value}&cname=${city.value}`) console.log(data3); area.innerHTML = data3.data.map(item => `<option value="${item}">${item}</option>`).join('') }) // 2、开始做市与县 city.addEventListener('change', async function () { console.log(city.value); const { data: data3 } = await axios.get(`/api/area?pname=${province.value}&cname=${city.value}`) console.log(data3); area.innerHTML = data3.data.map(item => `<option value="${item}">${item}</option>`).join('') })
三、图片（线上）预览
// 开始做图片预览 document.querySelector('#upload').addEventListener('change',function(){ const file =this.files[0] // URL.createObjectURL将我们的文件转线上 const url =URL.createObjectURL(file) img.src=url }) // 点击图片触发<input type="file" id="upload" /> 这个设置了hidden看不到（美观一点所以隐藏了css设置了hidden属性） img.addEventListener('click',function(){ document.querySelector('#upload').click() })
四、个人信息修改保存模块
// ----修改个人信息 document.querySelector('.btn-primary').addEventListener('click',async function(e){ e.preventDefault() // 图片保存 const fd = new FormData() // 文件放在FormData容器中用id名调用文件的位置 fd.append('avatar',upload.files[0]) const {data:data1}=await axios.post('/api/file',fd) console.log(data1); // 信息保存 const { data } = await axios.put('/api/settings',{ nickname:nickname.value, province:province.value, city:city.value, area:area.value, avatar:data1.data.url }) console.log(data); getUserInfo() })
附上，本文的源代码
<!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>08.案例_个人信息修改</title> <link rel="stylesheet" href="https://unpkg.com/bootstrap@5.1.3/dist/css/bootstrap.min.css" /> <style> .form-select { width: 103px; display: inline-block; } .col-form-label { text-align: right; } .figure-img { width: 100px; height: 100px; cursor: pointer; } #upload { display: none; } </style> </head> <body> <div class="container"> <h1 class="p-5">个人设置</h1> <form class="col-6"> <div class="row mb-3"> <label class="col-form-label col-3">昵称：</label> <div class="col-9"> <input class="form-control col-9" type="text" name="nickname" /> </div> </div> <div class="row mb-3"> <label class="col-form-label col-3">籍贯：</label> <div class="col-9"> <select class="form-select col-4" name="province"> <option value="">--省--</option> </select> <select class="form-select col-4" name="city"> <option value="">--市--</option> </select> <select class="form-select col-4" name="area"> <option value="">--区--</option> </select> </div> </div> <div class="row mb-3"> <label class="col-form-label col-3">头像：</label> <div class="col-9"> <!-- --> <input class="form-control col-9" type="hidden" name="avatar" /> <figure class="figure"> <input type="file" id="upload" /> <img src="https://yanxuan-item.nosdn.127.net/12a882699bd531a1bd428bffe1989525.jpg" class="figure-img img-fluid rounded" alt="..." /> <figcaption class="figure-caption">修改头像</figcaption> </figure> </div> </div> <div class="row mb-3"> <label class="col-3"></label> <div class="col-9"> <button class="btn btn-primary">保存</button> </div> </div> </form> </div> <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script> <script> // 设置基地址，省略url重复的写法 axios.defaults.baseURL = 'http://ajax-api.itheima.net' // 获取表单需要的所有dom元素，方便后面的dom操作 const nickname = document.querySelector('[name="nickname"]') const province = document.querySelector('[name="province"]') const city = document.querySelector('[name="city"]') const area = document.querySelector('[name="area"]') const img = document.querySelector('.rounded') async function getUserInfo() { // 获取个人信息 const { data } = await axios.get('/api/settings') console.log(data); // 渲染生成昵称与头像 img.src = data.data.avatar nickname.value = data.data.nickname // 1.先从服务器获取省份的数据 const { data: data1 } = await axios.get('/api/province') console.log(data1); //2获取下拉框 province.innerHTML = data1.data.map(item => `<option value="${item}">${item}</option>`).join('') province.value = data.data.province //市 const { data: data2 } = await axios.get(`/api/city?pname=${data.data.province}`) console.log(data2); city.innerHTML = data2.data.map(item => `<option value="${item}">${item}</option>`).join('') city.value = data.data.city // 地区 const { data: data3 } = await axios.get(`/api/area?pname=${data.data.province}&cname=${data.data.city}`) console.log(data3); area.innerHTML = data3.data.map(item => `<option value="${item}">${item}</option>`).join('') area.value = data.data.area } // 调用函数 getUserInfo() // 1、开始做省市联动，change事件：当改变的时候才触发 province.addEventListener('change', async function () { console.log(province.value); const { data: data2 } = await axios.get(`/api/city?pname=${province.value}`) console.log(data2); city.innerHTML = data2.data.map(item => `<option value="${item}">${item}</option>`).join('') // 3、最后开始做三级（省市县）联动 const { data: data3 } = await axios.get(`/api/area?pname=${province.value}&cname=${city.value}`) console.log(data3); area.innerHTML = data3.data.map(item => `<option value="${item}">${item}</option>`).join('') }) // 2、开始做市与县 city.addEventListener('change', async function () { console.log(city.value); const { data: data3 } = await axios.get(`/api/area?pname=${province.value}&cname=${city.value}`) console.log(data3); area.innerHTML = data3.data.map(item => `<option value="${item}">${item}</option>`).join('') }) // 开始做图片预览 document.querySelector('#upload').addEventListener('change',function(){ const file =this.files[0] // URL.createObjectURL将我们的文件转线上 const url =URL.createObjectURL(file) img.src=url }) // 点击图片触发<input type="file" id="upload" /> 这个设置了hidden看不到（美观一点所以隐藏了css设置了hidden属性） img.addEventListener('click',function(){ document.querySelector('#upload').click() }) // ----修改个人信息 document.querySelector('.btn-primary').addEventListener('click',async function(e){ e.preventDefault() // 图片保存 const fd = new FormData() // 文件放在FormData容器中用id名调用文件的位置 fd.append('avatar',upload.files[0]) const {data:data1}=await axios.post('/api/file',fd) console.log(data1); // 信息保存 const { data } = await axios.put('/api/settings',{ nickname:nickname.value, province:province.value, city:city.value, area:area.value, avatar:data1.data.url }) console.log(data); getUserInfo() }) </script> </body> </html>
