最近想學(xué)關(guān)于vuejs?和?element?ui ，趁著工作之余開(kāi)發(fā)了一個(gè)在線(xiàn)相冊(cè)的項(xiàng)目，功能有?注冊(cè)，登錄，預(yù)覽，各種中心，圖片上傳，我的資源，圖片編輯等，，在此做一個(gè)分享吧。

Git 地址 ：https://github.com/ryz-13997318136/photoalbum.git

https://github.com/ryz-13997318136/photoalbum.git https://github.com/ryz-13997318136/photoalbum.git https://github.com/ryz-13997318136/photoalbum.git

1?界面預(yù)覽

1.1 注冊(cè)頁(yè)面

1.2?主頁(yè)

1.3?個(gè)人中心

1.4?圖片上傳界面

1.5?我的資源

1.6?資源編輯

2?好了界面大概就這樣的，很簡(jiǎn)單，其中大量的使用了?element?ui，我覺(jué)得它是一個(gè)非常不錯(cuò)的css庫(kù)，界面簡(jiǎn)潔，風(fēng)格一致。很多控件他給我們做好了，我們只管使用，這種庫(kù)文件很適合做某某網(wǎng)站的后臺(tái)管理系統(tǒng)。好了下面開(kāi)始貼代碼

2.1?啟動(dòng)類(lèi)

@ComponentScan(basePackages="com.ryz.photoalbum") @EntityScan(basePackages="com.ryz.photoalbum.pojo") @EnableJpaRepositories(basePackages="com.ryz.photoalbum.repository") @SpringBootApplication public class PhotoalbumApplication {public static void main(String[] args) {SpringApplication.run(PhotoalbumApplication.class, args);} }

2.2?項(xiàng)目配置文件

spring.application.name=photo server.servlet.context-path=/photo server.port=8081 # 數(shù)據(jù)源配置 spring.datasource.url=jdbc:log4jdbc:mysql://118.25.65.113:3306/study spring.datasource.username=root spring.datasource.password=157123123 spring.datasource.driverClassName = net.sf.log4jdbc.DriverSpy spring.jpa.database = MYSQL spring.jpa.hibernate.ddl-auto=update spring.jpa.show-sql = true spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL5Dialect # 定位模板的目錄 spring.mvc.view.prefix=classpath:/templates/ # 給返回的頁(yè)面添加后綴名 spring.mvc.view.suffix=.html spring.thymeleaf.cache=false basePath=D:\\image\\

2.3?系統(tǒng)控制層 ，用來(lái)處理首頁(yè)的請(qǐng)求

@Controller @RequestMapping("/index") public class SysController {@Autowired UserService userService;@RequestMapping(value="/",method = RequestMethod.GET)public String index(Model model){return "index";}@RequestMapping(value="/main",method = RequestMethod.GET)public ModelAndView mian(String id){ModelAndView view = new ModelAndView();view.setViewName("main");view.addObject("cUser",userService.findPUserById(id));return view;}}

2.4?文件控制層，用來(lái)處理文件的上傳，下載，編輯，刪除的請(qǐng)求

@Controller @RequestMapping("/file") @Configuration public class FileController {@Resource private ResourceLoader resourceLoader;@Autowired private ImageService imageService;@Value("${basePath}")private String basePath;@RequestMapping("/upload")@ResponseBody public String handleFileUpload(@RequestParam("file")MultipartFile file, String userId){if(file.isEmpty()){return "FAIL";}SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");String location =df.format(new Date()) + System.getProperty("file.separator");// 判斷文件夾是否存在，不存在則 basePath = "all_image"+System.getProperty("file.separator");File targetFile = new File(basePath + location);if(!targetFile.exists()){targetFile.mkdirs();}String fileName = file.getOriginalFilename();fileName = fileName.length()>10?fileName.substring(fileName.length()-10):fileName;String url ="";try{Files.copy(file.getInputStream(), Paths.get(basePath + location, fileName), StandardCopyOption.REPLACE_EXISTING);url = location + fileName;}catch (Exception e){e.printStackTrace();}PImage image = new PImage();image.setId(String.valueOf(System.currentTimeMillis()));image.setUserId(userId);image.setImageName(fileName);image.setImageUrl(url);imageService.save(image);return url;}@RequestMapping(value="/{filePath}/{filename}",method = RequestMethod.GET)@ResponseBody public ResponseEntity<?> getFile(@PathVariable String filePath,@PathVariable String filename) {System.out.println("filePath----------------"+filePath);System.out.println("filename--------------"+filename);basePath = "all_image"+System.getProperty("file.separator");System.out.println("basePath-------------"+ basePath);ResponseEntity.ok().contentType(MediaType.IMAGE_PNG);String os = System.getProperty("os.name");if(os.toLowerCase().startsWith("win")){return ResponseEntity.ok(resourceLoader.getResource("file:" + Paths.get(basePath +filePath+"\\"+ filename).toString()));}else{File file = new File("/usr/photoalbum/all_image/2018-06-04/22.png");return ResponseEntity.ok(resourceLoader.getResource("file:" + Paths.get("/usr/photoalbum/all_image/" +filePath+"/"+ filename).toString()));}}@RequestMapping(value="/getImageByUserId",method = RequestMethod.GET)@ResponseBody public List<PImage> getImageByUserId(@RequestParam String userId){return imageService.getImageByUserId(userId);}@RequestMapping(value="/getRandomImages",method = RequestMethod.GET)@ResponseBody public List<PImage> getRandomImages(@RequestParam String userId,@RequestParam String model){return imageService.getRandomImages(userId,model);}@RequestMapping(value="/editDesc",method = RequestMethod.GET)@ResponseBody public void editDesc(@RequestParam String id,@RequestParam String desc,@RequestParam String name){imageService.editDesc(id,desc,name);}@RequestMapping(value="/deleteImageById",method = RequestMethod.GET)@ResponseBody public void deleteImageById(@RequestParam String id){imageService.deleteImageById(id);}}

2.5?用戶(hù)控制層，用來(lái)處理用戶(hù)的注冊(cè)，登錄，登出，用戶(hù)修改請(qǐng)求

@Controller @RequestMapping("/file") @Configuration public class FileController {@Resource private ResourceLoader resourceLoader;@Autowired private ImageService imageService;@Value("${basePath}")private String basePath;@RequestMapping("/upload")@ResponseBody public String handleFileUpload(@RequestParam("file")MultipartFile file, String userId){if(file.isEmpty()){return "FAIL";}SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");String location =df.format(new Date()) + System.getProperty("file.separator");// 判斷文件夾是否存在，不存在則 basePath = "all_image"+System.getProperty("file.separator");File targetFile = new File(basePath + location);if(!targetFile.exists()){targetFile.mkdirs();}String fileName = file.getOriginalFilename();fileName = fileName.length()>10?fileName.substring(fileName.length()-10):fileName;String url ="";try{Files.copy(file.getInputStream(), Paths.get(basePath + location, fileName), StandardCopyOption.REPLACE_EXISTING);url = location + fileName;}catch (Exception e){e.printStackTrace();}PImage image = new PImage();image.setId(String.valueOf(System.currentTimeMillis()));image.setUserId(userId);image.setImageName(fileName);image.setImageUrl(url);imageService.save(image);return url;}@RequestMapping(value="/{filePath}/{filename}",method = RequestMethod.GET)@ResponseBody public ResponseEntity<?> getFile(@PathVariable String filePath,@PathVariable String filename) {System.out.println("filePath----------------"+filePath);System.out.println("filename--------------"+filename);basePath = "all_image"+System.getProperty("file.separator");System.out.println("basePath-------------"+ basePath);ResponseEntity.ok().contentType(MediaType.IMAGE_PNG);String os = System.getProperty("os.name");if(os.toLowerCase().startsWith("win")){return ResponseEntity.ok(resourceLoader.getResource("file:" + Paths.get(basePath +filePath+"\\"+ filename).toString()));}else{File file = new File("/usr/photoalbum/all_image/2018-06-04/22.png");return ResponseEntity.ok(resourceLoader.getResource("file:" + Paths.get("/usr/photoalbum/all_image/" +filePath+"/"+ filename).toString()));}}@RequestMapping(value="/getImageByUserId",method = RequestMethod.GET)@ResponseBody public List<PImage> getImageByUserId(@RequestParam String userId){return imageService.getImageByUserId(userId);}@RequestMapping(value="/getRandomImages",method = RequestMethod.GET)@ResponseBody public List<PImage> getRandomImages(@RequestParam String userId,@RequestParam String model){return imageService.getRandomImages(userId,model);}@RequestMapping(value="/editDesc",method = RequestMethod.GET)@ResponseBody public void editDesc(@RequestParam String id,@RequestParam String desc,@RequestParam String name){imageService.editDesc(id,desc,name);}@RequestMapping(value="/deleteImageById",method = RequestMethod.GET)@ResponseBody public void deleteImageById(@RequestParam String id){imageService.deleteImageById(id);}}

2.6?pojo User set get?方法略，為了節(jié)省空間，不然?

@Entity @Table(name = "p_user") public class PUser implements Serializable {private String id;private String password;private String name;private String sex;private String mobile;private Date registerDate;private String headUrl; }

2.6?pojo?PImage?set get?方法略，為了節(jié)省空間，不然太多了

@Entity @Table(name = "p_image") public class PImage {private String id;private String userId;private String imageUrl;private String imageDesc;private String imageName;

? ? ?}

2.7?UserRepository

@Service public class UserService {@Autowired private UserRepository userRepository;public void register(PUser user){user.setId(String.valueOf(System.currentTimeMillis()));user.setRegisterDate(new Date());userRepository.save(user);}public PUser login(String name,String password) throws Exception {PUser user = userRepository.findPUserByNameAndPassword(name,password);if(user == null){throw new Exception("找不到用戶(hù)");}return user;}public PUser findPUserById(String id){return userRepository.findPUserById(id);}public void saveEdit(PUser user){userRepository.save(user);}}

2.8?ImageService

@Service public class ImageService {@Autowired private ImageRepository imageRepository;public void save(PImage image){imageRepository.save(image);}public List<PImage> getImageByUserId(String userId){return imageRepository.findPImagesByUserId(userId);}public List<PImage> getRandomImages(String userId,String model){if(model.equals("SJZS")){userId = "%";}List<String> list = imageRepository.getALLId(userId);int size = list.size();if(size == 0){return null;}List<String> id = new ArrayList<>();for(int i=0;i< 10;i++){int x=(int)(Math.random()*size);id.add(list.get(x));}return imageRepository.getRandomImages(id);}public void editDesc(String id,String desc,String name){Optional<PImage> optional = imageRepository.findById(id);PImage pImage = optional.get();pImage.setImageDesc(desc);pImage.setImageName(name);imageRepository.save(pImage);}public void deleteImageById(String id){imageRepository.deleteById(id);}}

2.9?UserRepository

@Repository @Table(name="p_user") public interface UserRepository extends CrudRepository<PUser,String> {PUser findPUserByNameAndPassword(String name,String password);PUser findPUserById(String id);}

2.10?ImageRepository

@Repository @Table(name="p_image") public interface ImageRepository extends CrudRepository<PImage,String> {List<PImage> findPImagesByUserId(String userId);@Query("select image.id from PImage image where image.userId like ?1")List<String> getALLId(String userId);@Query("select image from PImage image where image.id in ?1")List<PImage> getRandomImages(List<String> list); }

2.11?下面開(kāi)始貼界面的html，js ，css?文件

index.html

<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Photo_index</title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.min.js"></script> </head> <body style="background-color: azure;"> <div style="text-align: center;">在線(xiàn)相冊(cè)</div> <div id="vm1" style=" width: 100%;height: 137px;margin-top: 10px;"><div v-if="register" style="margin-top: 300px;text-align: center;">用戶(hù)注冊(cè) <el-row><el-col :span="8" :offset="8"><el-form :model="registerUser" status-icon :rules="registerRule" ref="registerUser"><el-form-item label="姓名" prop="name"><el-input v-model="registerUser.name" auto-complete="off" clearable maxlength="10"></el-input></el-form-item><el-form-item label="手機(jī)號(hào)碼" prop="mobile"><el-input v-model="registerUser.mobile" auto-complete="off" clearable maxlength="13"></el-input></el-form-item><el-form-item label="密碼" prop="password"><el-input type="password" v-model="registerUser.password" auto-complete="off" clearable maxlength="10"></el-input></el-form-item><el-form-item label="確認(rèn)密碼" prop="password2"><el-input type="password" v-model="registerUser.password2" auto-complete="off" clearable maxlength="10"></el-input></el-form-item><el-form-item><el-button type="success" @click="registerOk()">注冊(cè)</el-button><el-button type="success" @click="register=false;index=true">返回</el-button><el-button type="success" @click="registerRest()">重置</el-button></el-form-item></el-form></el-col></el-row></div><div v-if="login" style="margin-top: 300px;text-align: center;">用戶(hù)登錄 <el-row><el-col :span="8" :offset="8"><el-form :model="loginUser"><el-form-item label="姓名" ><el-input v-model="loginUser.loginName" clearable maxlength="10"> </el-input></el-form-item><el-form-item label="密碼" ><el-input type="password" v-model="loginUser.loginPassword" clearable maxlength="10"></el-input></el-form-item><el-form-item><el-button type="success" @click="loginOk()">登錄</el-button><el-button type="success" @click="login=false;index=true">返回</el-button><el-button type="success" @click="loginRest()">重置</el-button></el-form-item></el-form></el-col></el-row></div><div v-if="index" style="margin-top: 300px;text-align: center;"><el-row><el-col :span="8" :offset="8"><el-form><el-form-item><el-button type="success" @click="register = true;login = false;index=false">注冊(cè)</el-button><el-button type="success" @click="login=true;register = false;index=false">登錄</el-button></el-form-item></el-form></el-col></el-row></div></div> <script th:src="@{/js/index.js}"></script> </body> </html>

index.js

//Vue.http.options.emulateHTTP = true; var vm = new Vue({el: '#vm1',data: {// index index:true,// login login : false,loginUser:{'loginName':'','loginPassword':''},// register register:false,registerUser:{'name':'','password':'','password2':'','mobile':''},//validateName1:this.validateName, registerRule:{na: [{ validator: this.validateName1, trigger: 'blur' }],password: [{ validator: this.validatePassword, trigger: 'blur' }],password2: [{ validator: this.validatePassword2, trigger: 'blur' }],mobile: [{ validator: this.checkMobile, trigger: 'blur' }]}},methods:{registerOk:function(){this.$http.post("/photo/user/register",this.registerUser).then(function (response) {this.$message({type: 'success',message: '注冊(cè)成功，趕快去登錄吧！' });}).catch(function (response) { console.error(response); });},registerRest:function(){this.registerUser.name = '';this.registerUser.password='';this.registerUser.mobile='' },loginOk:function(){this.$http.get("/photo/user/login",{params: {name:this.loginUser.loginName,password:this.loginUser.loginPassword}}).then(function (response) {console.log(response);var user = response.body;if(user ==null){this.$message({type: 'success',message: '用戶(hù)名密碼有誤，登錄失敗！' });}else{window.location.href="/photo/index/main?id="+user.id;}}).catch(function (response) { console.error(response); });},loginRest:function(){this.loginName = '';this.loginPassword = '';},// 注冊(cè)校驗(yàn)方法 validateName:function(rule, value, callback){if (value === '') {callback(new Error('請(qǐng)輸入用戶(hù)名'));} else {callback();}},validatePassword:function(rule, value, callback){if (value === '') {callback(new Error('請(qǐng)輸入密碼'));} else {if (this.registerUser.password2 !== '') {this.$refs.registerUser.validateField('password2');}callback();}},validatePassword2:function(rule, value, callback){if (value === '') {callback(new Error('請(qǐng)?jiān)俅屋斎朊艽a'));} else {if (this.registerUser.password !== value) {callback(new Error('兩次輸入密碼不一致!'));}else{callback();}}},checkMobile:function(rule, value, callback){if (value === '') {callback(new Error('請(qǐng)輸入手機(jī)號(hào)'));} else {if(value.length !=11){callback(new Error('手機(jī)號(hào)不合法'));}else {callback();}}},},mounted: function () {var registerRule ={name: [{ required: true, message: '請(qǐng)輸入名稱(chēng)', trigger: 'blur' },{ validator: this.validateName, trigger: 'blur' }],password: [{ validator: this.validatePassword, trigger: 'blur' }],password2: [{ validator: this.validatePassword2, trigger: 'blur' }],mobile: [{ validator: this.checkMobile, trigger: 'blur' }]}this.registerRule = registerRule;},watch:{},updated:function(){//this.registerRule.name[0].validator=this.validateName },})

main.html

<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Photo_main</title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.min.js"></script><link th:href="@{/css/main.css}" rel="stylesheet" /> </head> <body><div id="vm2"><el-row><el-col :span="8"><p>當(dāng)前用戶(hù)：{{ user.name }}</p></el-col><el-col :span="8" :offset="8"><el-button type="primary" @click="logout">退出登錄</el-button></el-col></el-row><el-row><el-tabs type="border-card" @tab-click="tabClick"><el-tab-pane style="height: 500px;"><span slot="label"><i class="el-icon-date"></i>相冊(cè)展示</span><el-row :gutter="20"><el-col :span="16"><div style="width: 600px;"><el-carousel :interval="5000" arrow="always" height="400px" @change="carouselChange"><el-carousel-item v-for="item in pictures"><img height="390px" width="600px" :src="base+item.imageUrl"/></el-carousel-item></el-carousel></div></el-col><el-col :span="8"><div class="grid-content bg-purple">{{pictureDesc}}</div></el-col></el-row><br/><el-form :inline="true" class="demo-form-inline"><el-form-item><el-button type="primary" @click="getRandomImages('SJZS')">刷新圖片</el-button></el-form-item><el-form-item label="查看模式"><el-select v-model="showModel" placeholder="選擇一種模式" @change="showModelSelect"><el-option label="隨機(jī)展示" value="SJZS"></el-option><el-option label="只看自己" value="ZKZJ"></el-option></el-select></el-form-item></el-form></el-tab-pane><el-tab-pane label="個(gè)人中心" style="height: 400px;"><el-form ref="user" :model="user" label-width="80px"><el-form-item label="用戶(hù)標(biāo)識(shí)"> <el-input v-model="user.id" :disabled="true"></el-input> </el-form-item><el-form-item label="用戶(hù)名稱(chēng)"> <el-input v-model="user.name" maxlength="10"></el-input> </el-form-item><el-form-item label="用戶(hù)密碼"> <el-input v-model="user.password" maxlength="10"></el-input> </el-form-item><el-form-item label="手機(jī)號(hào)碼"> <el-input v-model="user.mobile" maxlength="13"></el-input> </el-form-item><el-form-item label="用戶(hù)性別"><el-radio-group v-model="user.sex"><el-radio label="男"></el-radio><el-radio label="女"></el-radio></el-radio-group></el-form-item><el-form-item><el-button type="primary" @click="saveUser">立即保存</el-button><el-button type="primary" @click="editUserRest">重置</el-button></el-form-item></el-form></el-tab-pane><el-tab-pane label="圖片上傳" style="height: 400px;" ><el-upload :data={'userId':user.id} action="../file/upload" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog></el-tab-pane><el-tab-pane label="我的資源" style="height: 400px;"><div style="height: 390px;overflow-y: auto;"><li v-for="item in myImages"><div id="main"><div style="margin-top: 10px; margin-bottom: 10px;"><img :src="base + item.imageUrl" th:width="100" height="100" :id="item.id" @click="imageClick(item.id)" /><p >{{item.imageName}}</p></div><div style="margin-top: 10px; margin-bottom: 10px;background: #00b8ff21;width: 762px;">描述:{{item.imageDesc}}</div></div></li></div></el-tab-pane></el-tabs></el-row><el-dialog title="圖片編輯" :visible="dialogFormVisible"><el-form :model="dialogForm"><el-form-item label="圖片標(biāo)識(shí)" :label-width="formLabelWidth"><el-input v-model="dialogForm.id" :disabled="true"> </el-input></el-form-item><el-form-item label="圖片名稱(chēng)" :label-width="formLabelWidth"><el-input v-model="dialogForm.imageName" clearable maxlength="10"> </el-input></el-form-item><el-form-item label="描述文本" :label-width="formLabelWidth"><el-input type="textarea" :rows="2" v-model="dialogForm.imageDesc" auto-complete="off" clearable maxlength="200"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="deleteImage">刪除這一張圖片</el-button><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dialogFormOk">保存修改</el-button></div></el-dialog></div> <script th:src="@{/js/main.js}"></script><script th:inline="javascript">/*<![CDATA[*/ var user = [[${cUser}]];console.log(user);vm._data.user = user;for(var key in user){vm._data.userBack[key] = user[key];}/*]]>*/ </script> </body></html>

main.js

Vue.http.options.emulateHTTP = true; var vm = new Vue({el: '#vm2',data: {// 圖片展示 pictures:[],user:{'id':'','name':'','password':'','mobile':'','sex':'','registerDate':'','headUrl':''},userBack:{},showModel:'',pictureDesc:'',// 圖片上傳參數(shù) dialogImageUrl: '',dialogVisible: false,// 我的資源 myImages:[],base:'../file/',dialogFormVisible:false,dialogForm:{'id':'','imageDesc':'','imageName':''},formLabelWidth:'120px' },methods:{logout:function(){var _this = this;this.$confirm('確定要退出當(dāng)前系統(tǒng)嗎?', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning',callback: function(id){if(id == 'confirm'){window.location.href="/photo/user/logout";}else{_this.$message({type: 'info',message: '已取消' });}}});},carouselChange:function(index){this.pictureDesc = this.pictures[index].imageDesc;},deleteImage:function(){this.$http.get("/photo/file/deleteImageById",{params: {id:this.dialogForm.id}}).then(function (response) {this.$message({type: 'success',message: '刪除成功！' });this.dialogFormVisible = false;this.getMyImage();}).catch(function (response) { console.error(response); });},dialogFormOk:function(){this.$http.get("/photo/file/editDesc",{params: {id:this.dialogForm.id,desc:this.dialogForm.imageDesc,name:this.dialogForm.imageName}}).then(function (response) {this.$message({type: 'success',message: '修改成功！' });this.dialogFormVisible = false;//this.getMyImage(); }).catch(function (response) { console.error(response); });},imageClick:function(id){this.dialogFormVisible = true;for(index in this.myImages){if(this.myImages[index].id == id){this.dialogForm = this.myImages[index];break;}}},showModelSelect:function (model) {this.getRandomImages(model);},getRandomImages:function(model){this.$http.get("/photo/file/getRandomImages",{params: {userId:this.user.id,model:model}}).then(function (response) {console.log(response);this.pictures = response.body;}).catch(function (response) { console.error(response); });},tabClick:function(tab){if(tab.index==3){this.getMyImage();}},getMyImage:function(){this.$http.get("/photo/file/getImageByUserId",{params: {userId:this.user.id}}).then(function (response) {console.log(response);this.myImages = response.body;}).catch(function (response) { console.error(response); });},handleRemove:function(file, fileList) {console.log(file, fileList);},handlePictureCardPreview:function(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},saveUser:function(){this.$http.post("/photo/user/saveEdit",this.user).then(function (response) {this.$message({type: 'success',message: '保存成功！' });}).catch(function (response) { console.error(response); });},editUserRest:function(){for(var key in this.userBack){this.user[key] = this.userBack[key];}}},mounted: function () {// 加載首頁(yè)隨機(jī)圖片 this.getRandomImages('SJZS');},watch:{} })

main.css

.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden; } .avatar-uploader .el-upload:hover {border-color: #409EFF; } .avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center; } .avatar {width: 178px;height: 178px;display: block; }.el-upload--picture-card {background-color: #fbfdff;border: 1px dashed #c0ccda;border-radius: 6px;box-sizing: border-box;width: 148px;height: 148px;cursor: pointer;line-height: 146px;vertical-align: top; } el-upload--picture-card i {font-size: 28px;color: #8c939d; }#main {width: auto;height: 150px;border: 1px solid #c3c3c3;display: -webkit-flex; /* Safari */ -webkit-justify-content: space-around; /* Safari 6.1+ */ display: flex;justify-content: space-around; }

2.12?最后貼上?pom.xml

<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.ryz</groupId><artifactId>photoalbum</artifactId><version>0.0.1-SNAPSHOT</version><packaging>jar</packaging><name>photoalbum</name><description>Demo project for Spring Boot</description><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.2.RELEASE</version><relativePath/> <!-- lookup parent from repository --> </parent><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding><java.version>1.8</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.44</version></dependency><dependency><groupId>com.googlecode.log4jdbc</groupId><artifactId>log4jdbc</artifactId><version>1.2</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><executions><execution><goals><goal>repackage</goal></goals></execution></executions></plugin></plugins></build></project>3?終于貼完代碼了，總結(jié)一下吧，主要使用element?ui?的? el-carousel?跑馬燈，你可以監(jiān)聽(tīng)他的change事件做你想做的事情，el-upload?文件上傳控件，他是一個(gè)非常不錯(cuò)的空間，界面好看并且有預(yù)覽功能，進(jìn)度條。登錄注冊(cè)時(shí)使用了el-form?中的校驗(yàn)規(guī)則，是一個(gè)非常好用的功能。js?中大量的使用了?vuejs?的特性，以及它的什么周期調(diào)用的各種鉤子。之前項(xiàng)目是運(yùn)行在我本地的，后面又放在騰訊云服務(wù)器上去，所以在文件上傳的地方稍微判斷了一下是什么Windows系統(tǒng)還是Linux系統(tǒng)，因?yàn)閮煞N系統(tǒng)的獲取文件不同。發(fā)現(xiàn)在騰訊云上獲取上傳的圖片是如果采用相對(duì)路徑不能獲取（權(quán)限都是777），后來(lái)改成絕對(duì)路徑了。這里的文件存儲(chǔ)在本地一定不是可以的方案，后面有時(shí)間找個(gè)文件服務(wù)器吧。

總結(jié)

以上是生活随笔為你收集整理的在线相册 ，图片上传， 基于 Spring boot vuejs element ui mysql 的项目的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。